Making games with JavaScript and RenderEngine – Sprites

Most of the functionality in RenderEngine is provided by components. You can find a detailed write up of what components are from theĀ RenderEngine website. The short version is that a host (which is a class, like the one we create below) is created to hold a number of components. These components can do anything from drawing an image to the screen, defining a position, respond to mouse events etc.

The combination of these components is what creates the object you see on the screen. A host with a sprite, mouse input and collision component would draw an image to the screen, move the image with the mouse, and collide with other objects. Or, in other words, it would be a player object.

For this tutorial we will create a host class that uses a sprite component to display an image on the screen. This is defined in the spriteGameObject.js file.

spriteGameObject.js

To display the sprite we need to use the SpriteComponent class, which is included here from the component.sprite.js file.

Engine.include(“/components/component.sprite.js”);

We also need to include the Sprite2D class, from the engine.object2d.js file.

Engine.include(“/engine/engine.object2d.js”);

Our host class extends the Object2D class.

Engine.initObject(“SpriteGameObject”, “Object2D”, function()

{

var SpriteGameObject = Object2D.extend(

{

constructor: function()

{

The base function calls the constructor from the Sprite2D superclass. This is necessary to initialize the Object2D class.

this.base(“SpriteGameObject”);

Here we add a new instance of the SpriteComponent class, giving it a name of draw. This component will draw the sprite.

this.add(SpriteComponent.create(“draw”));

To display a sprite we first need to get a reference to the sprite. We defined only one sprite called playerSprite, which we will load from the resource we called myresources (this name was defined in the game.js file).

var sprite = MyFirstGame.spriteLoader.getSprite(“myresources”, “playerSprite”);

Finally we set the sprite being display by the component.

this.getComponent(“draw”).setSprite(sprite);

}

}

);

return SpriteGameObject;

}

);

Now we need to modify the game.js file to load our new class.

game.js

Engine.include(“/rendercontexts/context.canvascontext.js”);

Engine.include(“/resourceloaders/loader.sprite.js”);

We need to include the new js file. Notice that we use Game.load instead of Engine.include. This is because Engine.include is used to load the RenderEngine js files (the path is relative to the location of the RenderEngine folder). Game.load is used to load js files for our game (relative to the folder that contains the game files).

If you look at the download archive you will see that the RenderEngine files are included in the same directory as the game file, but it is possible for the RenderEngine files to be hosted in a completely separate folder. This means your paths don’t have a whole bunch of periods likeĀ ../../RenderEngine/rendercontexts/context.canvascontext.js.

Game.load(“/spriteGameObject.js”);

Engine.initObject(“MyFirstGame”, “Game”, function()

{

var Tutorial1 = Game.extend(

{

constructor: null,

renderContext: null,

spriteLoader: null,

engineFPS: 15,

fieldWidth: 640,

fieldHeight: 480,

setup: function()

{

Engine.setFPS(this.engineFPS);

$(“#loading”).remove();

this.spriteLoader = SpriteLoader.create();

this.spriteLoader.load(“myresources”, this.getFilePath(“resources.js”));

MyFirstGame.loadTimeout = Timeout.create(“wait”, 250, MyFirstGame.waitForResources);

},

waitForResources: function()

{

if (MyFirstGame.spriteLoader.isReady())

{

MyFirstGame.loadTimeout.destroy();

MyFirstGame.loadingComplete();

return;

}

else

{

MyFirstGame.loadTimeout.restart();

}

},

loadingComplete: function()

{

this.renderContext = CanvasContext.create(“Playfield”, this.fieldWidth, this.fieldHeight);

The background color has been changed to light grey to make the sprite more easily visible.

this.renderContext.setBackgroundColor(“LightGrey”);

Engine.getDefaultContext().add(this.renderContext);

The only other change is that we create a new instance of the SpriteGameObject class, and add it to the render context.

this.renderContext.add(SpriteGameObject.create());

},

teardown: function()

{

this.renderContext.destroy();

}

}

);

return Tutorial1;

});

Conclusion

It has taken a bit of work, but we finally have created something interesting by displaying an image on the screen. We have seen how to create a host and add a component, which is the general process we will follow for all game objects moving forward. From here we can start to explore some more of the components included in RenderEngine to start building up a playable game.

Leave a Reply

Your email address will not be published. Required fields are marked *