Tutorial - Web GL Renderer

In Sprite Basic, object are created from functions applied to other objects, like renderer.createSprite() where you create a sprite by calling createSprite function on the renderer object
However one object is available at launch of the application, it is the 'app' object. From that object you can call different functions.

Addressing screen fragmentation

Because screen sizes varies a lot across devices and to ease porting applications on various screen sizes, Sprite Basic offers you the facility to set either a logical width or logical height to the screen.
For example if you main target device has a screen of 800 width, you would set a logical width of 800, and on all device screens operations will be done as if the screen has a width of 800 pixels even if the physical screen size might be different.
That way, you take care of only one width for all devices, and screen operations will be automatically scaled to the real physical screen size
Because not all devices has the same screen ratio, you can then retrieve the logical height of screen and adapt your display accordingly. (if you choose to set the logical height, you can then retrieve the logical width).

width=800 // all screen operation will be treated as the device width was 800, no matter screen size. app.setLogicalWidth(width) // graphics and positions will be scaled. Very useful for porting on devices of different screen sizes height=app.getLogicalHeight() // because not all devices have the same screen ratio, you can get the screen height that corresponds to the set screen width // rem : you could have set the logicalHeight and retrieve the logicalWidth

Creating a renderer

Before being able to draw sprites, texts, bitmapTexts on screen, you must first create a renderer.
This can be easily done by calling createRenderer() on the provied 'app' object.
You may defines the size of the renderer, by passing width and height as arguments of the functions, also this is optional.
If you don't specify width and height, device dimensions will be used.

renderer=app.createRenderer() // as we dont specify width and height, it will use screen dimensions

Adding Sprites

Once you have created a renderer, you can add graphics to the screen such as sprites, tilingSprites, animatedSprites, texts, bitmapTexts.
Those graphics remained displayed on screen, so make sure to not add them in every OnUpdate loop iteration, but only once
If later you want to remove those graphics from the screen, just apply to them the remove() function.
here we draw a serie of sprites with the help of two for loops. The sprite package has been imported into the project and path of the texture copied to clipboard from the sprite package browser.

for i=1 to width/80 for j=1 to height/80 object soldier=renderer.createSprite("centurion","roman-centurion/centurion-full-animation-sheet_0_85x136.png",i*80,j*80) // add a centurion at position varying along i and j values, default image size soldier.setScale(0.45) // make size 45% of original next next

You can try the code in TUTO-SPRITE-RENDERER project on the Guest Account
You can find reference of the functions used in the Documentation