מכללת פרוגיקס
פיתוח משחקים
ילדים, נוער ומתחילים

מערכת צירים במשחקים: למה Y עולה ב-Scratch ויורד ב-Canvas?

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

עודכן: יולי 2026
כ-4 דקות קריאה
קואורדינטות, תנועה ודיבאגינג
באג של סימן אחד

הוספנו 20 ל-Y. לאן הדמות תזוז?

ב-Scratch, שינוי של Y ב-20 מזיז דמות כלפי מעלה. בציור על HTML Canvas, אותה תוספת מזיזה אותה כלפי מטה. שני המנועים עקביים; הם פשוט משתמשים במפות שונות של המסך.

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

Scratch

y = y + 20

הדמות עולה

HTML Canvas

y = y + 20

הדמות יורדת

קודם קוראים את המפה

שלושה פרטים שמגדירים מערכת צירים

קואורדינטה היא כתובת של נקודה. X מתאר מיקום אופקי ו-Y מתאר מיקום אנכי, אבל המספרים מקבלים משמעות רק כשמכירים את נקודת המוצא ואת כיוון הגדילה. לכן ״המטבע נמצא ב-(100,50)״ הוא משפט חלקי עד שיודעים באיזו מערכת משתמשים.

נקודת המוצא
המקום שממנו מתחילים למדוד. ב-Scratch זו נקודת המרכז של הבמה; ב-Canvas זו בדרך כלל הפינה השמאלית העליונה.
כיוון חיובי
הכיוון שבו המספר גדל. הוא אינו חייב להיראות אותו דבר בכל סביבת פיתוח.
יחידת המרחק
במסכים עובדים לרוב בפיקסלים. שינוי של 20 פירושו תנועה של 20 יחידות על הציר המתאים.

השוואה חזותית

אותו מסך, שתי נקודות מוצא

החצים מראים לאן הערכים החיוביים גדלים. התרשים מפושט בכוונה כדי להבליט את ההבדל.

במת Scratch

המקור במרכז

HTML Canvas

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

לא מחליפים סימן — מגדירים המרה

נניח שבמת Scratch היא בגודל 480×360, ולכן המרכז שלה מתאים לנקודה (240,180) ב-Canvas. כדי להעביר מיקום, מזיזים את נקודת המוצא למרכז החדש וגם הופכים את כיוון Y. אם הדמות נמצאת ב-Scratch בנקודה (80,60), היא תופיע ב-Canvas בנקודה (320,120).

נוסחה אחת מסודרת עדיפה על תיקונים כמו+ 180או* -1שמפוזרים בעשרות מקומות. כשגודל המסך משתנה, מתקנים את ההמרה ולא רודפים אחרי כל דמות בנפרד.

Scratch → Canvas
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

function toCanvas(scratchX, scratchY) {
  return {
    x: centerX + scratchX,
    y: centerY - scratchY
  };
}

toCanvas(80, 60);
// { x: 320, y: 120 }

ויש עוד שאלה: איפה הדמות מחזיקה את המיקום?

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

כלל עבודה שימושי

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

מעבדת באגים לפי סימפטום

שלוש תקלות שמערכת צירים מסבירה מהר

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

1

הדמות קופצת למטה במקום למעלה

הקוד מניח ש-Y חיובי פונה למעלה, אבל הסביבה מודדת Y כלפי מטה.

מה בודקים

רושמים את Y לפני ואחרי צעד אחד ובודקים באיזה כיוון המספר גדל.

2

אויבים נוצרים מחוץ למסך

נקודת המוצא או רוחב המסך הועתקו ממערכת צירים אחרת בלי המרה.

מה בודקים

מסמנים על נייר את (0,0), את ארבעת הגבולות ואת מיקום ההופעה הרצוי.

3

הציור נכון, אבל בדיקת ההתנגשות מפספסת

הדמות צוירה מנקודת המרכז, בעוד שתיבת ההתנגשות מחושבת מהפינה.

מה בודקים

מציירים זמנית את המלבן שנבדק ומשווים אותו לגבולות הדמות.

לפני שמעבירים משחק לסביבה אחרת

ארבע בדיקות שחוסכות תיקוני מיקום

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

  1. 01

    מזהים את המקור

    האם (0,0) נמצא במרכז, בפינה או במקום שהוגדר ידנית?

  2. 02

    מסמנים את הכיוונים

    לא מנחשים: בודקים לאן X ו-Y גדלים בפועל.

  3. 03

    מגדירים נקודת עוגן

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

  4. 04

    ממירים פעם אחת

    כותבים פונקציית המרה קטנה ומשתמשים בה במקום לפזר תיקונים בכל הקוד.

תרגיל מסכם ללא מנוע משחק

ציירו מסך אחד בשתי מערכות צירים

ציירו מלבן ביחס 4:3 וסמנו בו דמות, מטבע ופלטפורמה. תחילה תנו לכל נקודה כתובת כאילו המרכז הוא (0,0) ו-Y גדל למעלה. אחר כך המירו את אותן נקודות למסך שרוחבו 480 וגובהו 360, עם מקור בפינה ו-Y שגדל למטה. לבסוף הסבירו במילים למה מיקום הדמות השתנה במספרים אך לא בתמונה.

במסמכי הלימוד שסופקו לפרוגיקס מופיעים תנועה ולוגיקת משחק ב-Scratch, משחקי דפדפן ב-JavaScript ופיתוח משחקים ב-Pygame. התוכן והכלים במסלולים עשויים להשתנות; התרגיל כאן עומד בפני עצמו ומחבר בין המושגים המשותפים.

ממשיכים לפרויקט משחק ב-Scratch