2D ShiVa 101 – ShiVa Engine

2D ShiVa 101

First of all, the ShiVa engine is an advanced crossplatform 3d engine that has been designed to bring high quality 3d rendering to a vast amount of platforms, like PCs, mobile phones, and consoles. While there is no reason that you cannot create 2D games with shiva as well, keep in mind that it has been in no way optiized for that purpose and you will probably run into problems or missing features for that particular application type sooner or later.

Fake2D

Fake2D is possibly the easier way to achieve a 2d game look and feel, compared to the HUD-only approach presented below.

Quads

Fake2D will work mostly with quads, that is 2 triangles stitched together and receiving a material/texture. Animating those quad textures is easy. Do not use Texture Clips, since it is not possible to control the Texture Clip’s animation properties. Do this instead:
– preload your “animated sprites” textures, using application.forceTextureToStayLoaded
– make them loop by script, using shape.overrideMeshSubsetMaterialEffectMap0

Limit Movement

You can just use 3D quads aligned with the XY plane, and a camera looking always at the Z axis (and with a small FOV to reduce perspective projection), in order to ignore the 3rd dimension. Some pure 2D games made with ShiVa are using this technique.

Physics

One big advantage of this technique is that you can use ShiVa’s built-in physics, sensors, and so on. It is important that you limit the way physics can interact with the environment the way you do with standard movement. To limit e.g. collision physics in a sidescroller game to 2 axes, apply invisible collider planes to either side of the level and set them invisible or use guard box to limit dynamics movement on Z axis.

Tile Matrix

Anybody wanting to write large tile games (minesweeper, tetris, bejewelled etc) needs to worry about low frame rates on low end devices. Here is a solution that allows a large matrix of tiles to be animated with just 2 drawcalls. Every tile can have its texture changed very quickly at runtime. Play the Demo or Download the STE project

--Textured Quads are created at runtime
local hQuad = scene.createRuntimeObject ( hScene, "QUAD" )
--on a grid measuring
this.nWidth ( nW )
this.nHeight ( nH )
-- and then being parented to a shared root object:
object.setParent ( hQuad, hGroup, true )
--The group is then being combined to just one object and effectively being transformed into a new object, so that the old group can be removed:
local hCombined = scene.combineRuntimeObjectsGroup ( hScene, hGroup )
scene.destroyRuntimeObject ( hScene, hGroup )

Quads are textured with an atlas that combines all textures into one big image. Animation is achieved by changing the image shown on a quad – since we are dealing with an atlas though, we do not switch images, we merely change the part of the image that is shown to the user by adjusting mesh.setSubsetVertexTexCoord. Depending on the size of the atlas, we then pick one random image for all quads as described in AI_Main.RandomCells ( ) or for the quads successively as in AI_Main.SetQuadUV. In order to write to the mesh subset vertex buffer, you have to lock and unlock it every time:

mesh.lockSubsetVertexBuffer ( hMesh, 0, mesh.kLockModeWrite )
--some code
mesh.unlockSubsetVertexBuffer ( hMesh, 0 )

2D with HUDs

Alternatively, you can try to create 2D games only with HUDs. It is indeed possible to use HUDs to make “old fashion 2D games” with only translation, scaling, rotation, color change and texture swapping of the sprites. For that you can use functions like

hud.setComponentPosition
hud.setComponentRotation
hud.setComponentSize
hud.setComponentBackgroundColor
--etc.

Some of these functions have major drawbacks though, note that hud.setComponentRotation command on a container just rotated the container, not the content. So correct child rotation is currently not possible with the onboard functions.

Pixel Accuracy

As shiva’s HUD system has been designed to scale automatically to the screen resolution, it works with abstract values and percentages. so there is currently no pixel accuracy for HUD elements.

Animating HUDs

One key element to HUD game creation is the animation of HUD elements, since you probably want your character to move and display some kind of walk animation. Loop through your background images. Watch this youtube video to get an idea how to do that.

Texture Atlas

GamescorpionatlasYou should use Texture Atlases for efficiency reasons on mobile devices. The idea is that you pack lots of textures into one big one, and then use UV offsets to define which region of this large texture to display in your HUD components. This means that only one texture has to be referenced by the graphics hardware. For example, you could have an image that is 1024×1024 in size and may have four 512×512 images inside of it.
It can be a bit fiddly calculating the UVs from an atlas image, especially if you want to add new textures to it later. The two main functions you will need are:

shape.setMeshSubsetMaterialEffectMap0AdditionalUVOffset
shape.setMeshSubsetMaterialEffectMap0AdditionalUVScale

Scroll down to the end of this page for additional tutorials on 2D atlases.




Need more answers?

  • slackBanner