Scaling כשמפבלשים ל-HTML


#1

שלום לכולם! אולי מישהו יודע מנסיונו - כשמפבלשים ל-HTML יש דרך להימנע מ-scaling כשמגדילים את שטח המסך? זה מאט לי מאד את תנועת האובייקטים כשהמסך גדל…
בניתי את המשחק הזה: http://haxecoder.com/post.php?id=14 וזה עובד מצוין בפלאש, אבל ב-HTML משום מה יש scaling…
אשמח למחשבות\הבהרות בנושא.
תודה!


(Itzik Arzoni) #2

למה אתה מתכוון ב Scaling? האם לכך שהקצוות מטושטשים? או שזה פשוט נמתח לרוחב כל החלון?
אני חושב שאחת הדרכים להמנע ממתיחה, היא לשנות את ה CSS של הקנבס, או לחילופין, לטעון את הדף ל iframe של דף אחר.
אני אנסה לבדוק את זה


(מיכאל שלמה) #3

שלום אסף!
הפיתרון של איציק מתחתי הוא נכון!! אבל בשביל הרקורד:

אוקי, אז גם יצרתי את הפרוייקט ו:

  1. אני לא רואה איטיות של האובייקטים, הם נעים בצורה חלקה, איציק היום סיפר לי שעידכנו היום את openFl לרינדור חומרה ולא לרינדור תוכנה מה שאמור לשפר את הביצועים, אולי זה קשור, נסה לעדכן גם.
  2. כפי שאיציק אמר, מה שיפה בהקס באופן כללי זה שאתה לא אמור לשנות את הרגלי העבודה שלך (אם היו לך כאלה ב-HTML) בתחום ה-Front end הקס מהווה תחליף ל-JS בלבד, כלומר שאתה עדיין ממשיך לעבוד עםHtml5 ו-CSS, אם כי במקרה של OpenFl השימוש באלו הינו מועט משום שכל המכניקה של המשחק ממילא מתבצעת ב-Haxe/JS ולכן, הפיתרון הפשוט הוא להוסיף לדיב openfl-content שנמצא בתוך /bin/html5/bin/index.html רוחב וגובה כלומר:
<div id="openfl-content" style="width:500px;height:500px"></div>

יכול להיות שיש פיתרון מובנה ב-OpenFl אבל אולי לא טרחו כי זהו פיתרון מאוד פשוט.
אני חושב שזה שהפלט של OpenFl נשפך אל תוך div אחד פשוט נהדר!


(Itzik Arzoni) #4

מיכאל, האם בדקת שכאשר אתה מפבלש, זה לא דורס את השינויים שעשית?

עריכה:
אוקי, אז הבנתי מה קורה פה. לכל פרוייקט OpenFl יש קובץ Project.xml שמגדיר לו את כל הפרמטרים ליצירת הפרוייקט.
הפתרון הנכון הוא להוסיף בקובץ את השורה הזו:

<window fullscreen="true" resizable="false" borderless="false" vsync="false" />

זה כבר יעשה את העבודה. אפשר לראות את כל הפרמטרים של הקובץ project.xml כאן:
http://www.openfl.org/documentation/projects/project-files/xml-format/

דרך אגב, לפרוייקט הקס שאינו OpenFl, אין את הקובץ הזה, ולמעשה הוא לא יוצר HTML אלא רק את קובץ הJS של הקומפילציה.


(מיכאל שלמה) #5

צודק לחלוטין! אני רגיל ל-Haxe/JS ולא ידעתי ש-OpenFl דורס גם את ה-HTML.
בכל מקרה, מסתבר שגם שאפשר לשחק עם איך שה-index.html הזה יראה ואפילו ליצור Manifest משלך ככה שיש לך גמישות מצויינת!
http://player03.com/2014/08/14/template-basics/


(Itzik Arzoni) #6

במאמר שקישרת מדובר באנדרואיד…


(מיכאל שלמה) #7

ברור, אבל זה על אותו עיקרון… ניסיתי את זה…
בגדול אתה יכול להחליף את הטמפלייט בטמפלייט משלך וככה בעצם להוסיף קישורים ל-CSS ומה שבא לך, הבעיה עם זה, זה שזה בעצם “מבטל” את ה-Project.xml, ולכן אני חושב שיותר מגניב לשנות את המניספט או ליצור HXP אבל לא התעמקתי.


#8

קודם כל, תודה על התגובות והנסיון לעזור!
ניסיתי להוסיף את השורה:

<window fullscreen="true" resizable="false" borderless="false" vsync="false" />

ל-project.xml וזה יצר לי בעיה, כי בגלל ה-fullscreen הוא התייחס לכל גודל המסך כאל הבמה. אז שיניתי אותו ל-false ואז זה נראה טוב יותר, אבל למעשה ראיתי שעדיין כל התוכן נמתח ואז ראיתי שב-HTML יש תגית style כזאת:

#openfl-content { background: #000000; width: 100%; height: 100%; }

וזה מוזר, כי ב-XML יש לו גם את התגית:

<window width="500" height="500" unless="mobile" />

אז עשיתי שינוי ידני ב-HTML כך שהרוחב והגובה יהיו שווים ל-500px במקום 100% וזה סידר את עניין הגודל.
העניין הוא שבעיית האיטיות המשיכה גם כשהקנבס קטן.
עשיתי קצת נסיונות וגיליתי שהבעיה לא קשורה בכלל לגודל הקנבס, אלא לגודל החלון, או יותר מדויק לגובה החלון. כשאני מותח את גובה החלון בדפדפן התנועות נעשות איטיות וכשאני מחזיר חזרה לגובה הקרוב לגובה הקנבס התנועות נעשות שוב מהירות…
העליתי דוגמא לשרת שלי:
http://codactive.com/work/openfl/html5/
שימו לב - אם פותחים את הלינק הזה ישירות בחלון גדול, יכול להיות שזה ירוץ טוב בהתחלה, אבל תנסו קצת לשחק עם הגובה שלו ותראו את ההבדל.
אגב, גירסת הפלאש מושפעת באותה מידה: http://codactive.com/work/openfl/flash/

אשמח לשמוע איך זה פועל אצלכם ומה אתם חושבים על זה.


#9

עדכון:
לאחר שבדקתי וראיתי שבדפדפנים אחרים זה עובד בסדר וללא איטיות, חקרתי עוד וגיליתי שהבעיה כנראה נבעה מאחד ה-extensions של כרום. לאחר שסגרתי את כולם ופתחתי אחד אחד - זה עובד כמו שצריך גם בכרום!

מצטער אם גרמתי למישהו לעבוד סתם כדי לענות לי, אבל בכל זאת למדנו משהו :slight_smile: וזה עשוי לעזור למישהו אחר שאולי ייתקל בתופעה דומה.

העיקר שזה עובד טוב - כבר חששתי שהאיטיות קשורה לטכנולוגיה ושאולי לא כדאי להיכנס לזה וכו…
אני ממשיך ללמוד ולהתנסות!


(מיכאל שלמה) #10

אבל כששינית ידית את ה-HTML אז הוא לא דרס לך אותו כשקימפלת את ה-OPENFL שוב?


#11

פשוט שיניתי את שם הקובץ כדי שלא ידרוס ואח"כ החלפתי את ה-HTML החדש שנוצר בקובץ ששמרתי.