Demonstration of the use of side-facing character sprites in an isometrically projected 2D game stage
Wouldn't it be great to take chracter sprites made for sidescrollers and utilise them in an isometric environment? Having access to the decades worth of assets will definitely help many isometric projects.
However, this is not as easy as slapping sprites on an isometric stage and calling it a day. The horizontal viewing angle of 45 degrees means that any sort of interaction with adjacent sprites suffer from a y-axis offset:
Then how about rotating the entire stage 45 degrees clockwise or anticlockwise every time an interaction happens? This works rather well for the popular "isometric board game" aesthetic, and this project is a demonstration of that:
- A fully code-drawn isometric stage with its size configurable by the user
- Four-way sliding on screen to rotate stage and trigger sprite interactions
- Movement and interaction (attack) functionality for characters
- Spine animation support for sprite attack, hurt, and death animations
- Works for most common screen aspect ratios and is framerate-independent
LÖVE 11.4 is required on any supported platform, although any 11.X version will work. The LÖVE wiki contains instructions on executing a LÖVE program for each platform.
The character sprites shown in the gifs above are not part of the hosted code; one must include their own Spine character sprites alongside the Spine-Lua and Spine-LOVE runtimes. This demo was tested with Spine 3.8 sprites and runtimes.
Note that one must also obtain a Spine License for full use of the runtimes. For legal details, please refer to the Spine Runtimes License Agreement and Spine Editor License Agreement(Section 2).
Place the spine-lua and spine-love directories in the project root /. For each sprite place its .json, .atlas and .png file inside a subfolder in /assets. All raw assets are accessed though the wrapper module /assets/assetmapping.lua; use the /assetmapping_template.lua template provided.
Three animations are used: Idle, Attack, Hurt, and Die. These strings are hardcoded at the moment; make sure such animations exist in the sprites included. During the Attack animation, it is expected for the sprite to call an onAttack Spine event, triggered when an attack connects ("hits") with its target. No other events are required.
Additionally, it is reccomended to add a font to /assets/font for text rendering.
- Running on various screen aspect ratios and resolutions work but resizing is bugged. It is disabled by default in
main.lua. - For older commits, the interface/wrapper for handling sprite assets is not implemented well; getting them to work may require some tinkering.
This project is distributed under the MIT license. Please feel free to use, modify, or simply take the concept and create derivative work. This is merely a demo after all. See LICENSE for more information.
- yurakr for creating the character sprites used in the above images. Purchased from GraphicRiver
- rsms for the Inter typeface, also used in the above images.