Shop Run Drone
Left bottom in the above image is an inked drawing on isometric paper showing the signed off concept artwork for a game where you drive a drone around a 2/3D isometric grid. The idea is that using the WASSDFZ keys you can steer the drone to and through any of the unoccupied spaces in a 4x4x4 grids space populated with isometric pixel art.
We wanted to use some technologies already familiar to the shop and get going as quickly as possible and found a nice pixi-react repository that combined the stable flexibility of React and the no nonsense 2D rendering library Pixi.js. This gave us our first emergent design constraint: a single point of view and being okay with the drone being completely invisible when behind some scenery [perhaps a later version could make the assets fade out, but for now it’s a quite a challenge for the player]. We did a further pencil drawing on isometric paper where did the sprite offset sums by hand for each of a 1x1x1 2x2x2 and 3x3x3 as well as 1×2 and 3×1 grids. This process helped better visualise the 3d space we would be working with as well as providing some useful test cases for when we start coding.
The IDE in the image above shows the prototype layout engine for the game. This is set next to an image of the working prototype left. Here we display in the isometric art in the loading screen map. This is rendered from mocked json to demonstrate how our procedurally generated maps will be converted to tile positions and with the drone sprite resting in it’s save space. For this we used the Pixel Drone asset from knik1985 on opengameart.org and the iso-64×64-outside.png isometric sprite sheet from likely the same website.