Castle Game Engine (2D): Build a Moving Sprite from Scratch (Editor + Code)

In this hands-on CGE tutorial, we go from a blank “Empty Project” to a working 2D scene with a green square that moves across the screen and wraps to the other side—Pac-Man style. You’ll learn how the CGE editor (views, hierarchy, inspector, viewport) maps to Pascal code, how to add a 2D TCastleViewport, create a TCastlePlane sprite, set unlit material/colors, and then animate it with Update using SecondsPassed. We’ll also grab camera dimensions (Orthographic.EffectiveWidth) to implement a clean screen wrap. What you’ll learn * Create a CGE project (Empty Project) and understand the editor layout * Add a 2D viewport, camera, and game objects (plane as “sprite”) * Use unlit materials and scene background color for predictable color * Editor ⇒ Code: reference designed components with DesignedComponent * Implement an Update loop and frame-rate-independent movement (SecondsPassed) * Read camera width via Camera.Orthographic.EffectiveWidth * Do classic screen wrap logic for a moving object CGE / Pascal Concepts & APIs TCastleViewport, TCastlePlane, TCastleTransform.Translation, DesignedComponent, Update(const SecondsPassed: Single; …), Orthographic.EffectiveWidth, editor Hierarchy/Inspector, materials (Unlit), background color. Who it’s for Beginners, OWL Scholars, educators, and Pascal devs curious about 2D in CGE with clean editor→code workflows. ⏱️ Chapters * 00:00 Intro & goal (simple 2D demo) * 00:18 New “Empty Project”; name & caption * 00:46 Editor tour: views, hierarchy, inspector, viewport, messages * 02:18 Add 3D viewport (brief demo) & Blender analogy (camera/view) * 04:00 Switch to 2D viewport; Items root, camera; remove starter panel * 04:48 Add Plane → name GreenSquare; set RGB; switch to Unlit * 05:54 Background to black; set plane Axis to 2D; size 100×100 * 06:18 Coordinates & origin at center (X/Y matter for 2D; Z ignored) * 06:58 Open gameviewmain.pas in Lazarus; add needed uses * 08:58 Private fields: GreenSquare: TCastlePlane; MainViewport: TCastleViewport * 10:02 In constructor: DesignedComponent('GreenSquare') / Viewport1 * 10:56 In Update: constants/vars; get current position * 11:58 Move with SecondsPassed (frame-rate independent) * 12:34 Read camera width: Camera.Orthographic.EffectiveWidth * 13:06 Screen wrap logic (right edge → left side) * 13:32 Apply translation; compile & fix typos (Viewport, Orthographic) * 14:44 Run: smooth horizontal movement & wrap * 15:04 What’s next: input, enemies, projectiles Hashtags #CastleGameEngine #Pascal #FreePascal #LazarusIDE #GameDev #2DGame #KidsWhoCode #STEMEducation #OpenWiseLearning #LinuxCoding