Summary  
This chapter explains how to update an object’s position properties inside a repetitive loop to produce smooth, frame-by-frame movement by adjusting its x and y coordinates each cycle.

General domain of usage  
Game development

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuanMuY2xvdWRmbGFyZS5jb20vYWpheC9saWJzL3BpeGkuanMvNy40LjAvcGl4aS5taW4uanMiPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxzY3JpcHQ+CiAgICAgIC8vIENyZWF0ZSBQaXhpSlMgYXBwbGljYXRpb24KICAgICAgY29uc3QgYXBwID0gbmV3IFBJWEkuQXBwbGljYXRpb24oewogICAgICAgIHdpZHRoOiA2NjAsCiAgICAgICAgaGVpZ2h0OiA0MDAsCiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAweDEwOTliYgogICAgICB9KTsKCiAgICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoYXBwLnZpZXcpOwoKICAgICAgLy8gTG9hZCB0aGUgc3ByaXRlIHRleHR1cmUKICAgICAgUElYSS5Bc3NldHMubG9hZCgKICAgICAgICAiaHR0cHM6Ly9waXhpanMuaW8vZXhhbXBsZXMvZXhhbXBsZXMvYXNzZXRzL2VnZ0hlYWQucG5nIgogICAgICApLnRoZW4oKHRleHR1cmUpID0+IHsKICAgICAgICAvLyBDcmVhdGUgc3ByaXRlCiAgICAgICAgY29uc3Qgc3ByaXRlID0gbmV3IFBJWEkuU3ByaXRlKHRleHR1cmUpOwoKICAgICAgICAvLyBQb3NpdGlvbiB0aGUgc3ByaXRlCiAgICAgICAgc3ByaXRlLnggPSAxMDA7CiAgICAgICAgc3ByaXRlLnkgPSAyMDA7CiAgICAgICAgc3ByaXRlLmFuY2hvci5zZXQoMC41KTsKCiAgICAgICAgLy8gQWRkIHRvIHN0YWdlCiAgICAgICAgYXBwLnN0YWdlLmFkZENoaWxkKHNwcml0ZSk7CgogICAgICAgIC8vIE1vdmVtZW50IGluIHRoZSBnYW1lIGxvb3AKICAgICAgICBhcHAudGlja2VyLmFkZCgoZGVsdGEpID0+IHsKICAgICAgICAgIHNwcml0ZS54ICs9IDUgKiBkZWx0YTsgLy8gbW92ZSByaWdodCBzbW9vdGhseQogICAgICAgIH0pOwogICAgICB9KTsKICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

When you want to animate a sprite in a PixiJS game, you update its properties inside a game loop. The most common property to change for movement is the sprite's position, such as `x` and `y`. The game loop runs many times per second, and each time it runs, you can change the sprite's coordinates. This creates smooth, continuous movement across the screen. By adjusting the amount you add or subtract from the position each frame, you control the speed and direction of the sprite. This technique is essential in game development, as it allows you to create dynamic, interactive graphics that respond to user input or game logic.

In a typical game loop, why do we update sprite positions on each frame?

Create interactive 2D game graphics using PixiJS and JavaScript. Work with sprites, textures, animation, containers, and event handling to build dynamic visual scenes.

Build a strong foundation by learning how PixiJS handles textures and sprites. Work with positioning, movement, and visual effects to create expressive 2D elements. Gain essential skills for constructing any graphical or game scene.

Animate sprites using frame-based techniques and organize game objects with containers. Learn how grouping improves performance and structure in larger scenes. Create animated characters and reusable visual components.

Add player interaction through mouse, touch, and keyboard events. Make sprites respond to clicks and movement while controlling character input. Develop interactive game mechanics that engage users.

Apply basic physics concepts such as gravity, collisions, and velocity to bring motion to life. Manage game state and implement foundational logic for movement, rules, and challenges. Build systems that simulate real gameplay behavior.

Sprite Position and Movement