Category: the knowledge
-
Coding best practices
See also: System: VARIABLES JS – when you want a changeable or mutable variable use a let. For any data that should be protected from accidentally being overwritten, like an object, or an array or a function, use a const. COMPARISON JS – use === for absolute equality FUNCTIONS JS – use function expression –…
-
State machines
See also: System: Is what he says here ACTUALLY true? I think it comes down to semantics. Still, an interesting video… ‘If you’re not using state machines as the fundamental organising principle behind your game, then you’re doing it wrong…” https://gameprogrammingpatterns.com/state.html https://shaggydev.com/2021/11/01/state-machines-intro https://gameprogrammingpatterns.com/state.html What the machine recons https://xstate.js.org/docs https://github.com/jakesgordon/javascript-state-machine https://jotai.org – Jotai takes an atomic…
-
Collision detection
See also: System: Concepts hitboxes separating axis theorem… most of the time you can use rectangle/rectangle collisions… Tile based collision is the simplest – uses a very broad phase approach – just need to know where we are in the tile array – lots less info to search… Inverse collision detection Broad phase and narrow…
-
Maps and levels
See also: layers System: loading/unloading maps Tile Buffer A More Efficient Tile Map A tile buffer – draw once, reuse many times Draw map onto a buffer canvas – then render the buffer canvas – and this is what can be animated? Logical layers Tile size Map size loading levels and different rooms etc. a…
-
Camera
See also: System: ‘Camera Manipulations’ Camera methods: needs to know: What is the view point – how does the camera interact (or not) with the player Most common is: locks onto player – stops at level edges Centre on player – player is static (apart from animations etc.) and bg scrolls – tops at level…
-
Tiled images
See also: System: For tiled images, it is usual to have something like: Use TILED image editor (https://www.mapeditor.org/) to edit Also aseprite A good outline of using tiled: Creating a Mario style level in Python / Pygame with a visual level editor [Tiled] A good JS focused one: Pokémon JavaScript Game Tutorial with HTML Canvas…
-
Search
See also: System: First – what is built into the language? in two stages – sort the data, then search it Merge sort – O(nlog n) – Ω(n) if only one number quit else sort left half of numbers sort right half of numbers merge sorted halves https://www.geeksforgeeks.org/sorting-algorithms/ Resources
-
Scrolling
See also: System: single layer – multi directions parallax Camera in a moveable, inner boundary What we want – character moves around in the ‘inner boundary’ – when they reach the egde, camera will start to move remains independant to size of map – but is defined by Resources
-
Sprite management
See also: System: Make spriteObjects for each ‘thing’ in the game – including x/y position on origin sprite sheet Push them onto a sprites array loop through the array and render each item Resources the kittykat thing…
-
Parallax backgrounds/endless scroll
See also: System: needs a single variable to control the scrolling – otherwise there may be a gap which changes over time… Covered in AGDwJS p 316 (Creating the Scrolling Background) Requirements: This one works by – 2 instances of image one next to another when image 2 gets to 0, reset both instances: image…