Advanced Tutorial - The HostComponent Component
If you'd like, you can download the source for this tutorial here. See Tutorial 1 for basic engine setup.Creating the Index File
Create your index.html file in your game folder. This will be the startup file for your game and will need to load some library files and the engine runtime.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tutorial 4</title>
<!-- Load the supporting libraries -->
<script type="text/javascript" src="../../libs/base.js"></script>
<script type="text/javascript" src="../../libs/jquery.js"></script>
<script type="text/javascript" src="../../libs/jquery.ext.engine.js"></script>
<script type="text/javascript" src="../../libs/sylvester.js"></script>
<!-- Load the main engine script -->
<script type="text/javascript" src="../../engine/runtime/engine.js"></script>
</head>
<body>
<script type="text/javascript">
// Load the game script
Engine.loadGame('game.js','MyFirstGame', 'Advanced Tutorial 1');
</script>
</body>
</html>
Creating the Game Class
// Load all required engine components
Engine.include("/rendercontexts/context.canvascontext.js");
Engine.include("/engine/engine.timers.js");
Engine.initObject("MyFirstGame", "Game", function(){
/**
* @class My first game - a simple test which will rotate some
* text around its center point.
*/
var MyFirstGame = Game.extend({
constructor: null,
// The rendering context
renderContext: null,
// Engine frames per second
engineFPS: 15,
// The play field
fieldBox: null,
fieldWidth: 480,
fieldHeight: 480,
/**
* Called to set up the game, download any resources, and initialize
* the game to its running state.
*/
setup: function(){
// Set the FPS of the game
Engine.setFPS(this.engineFPS);
// Remove the "loading" message
$("#loading").remove();
// Create the render context
this.fieldBox = Rectangle2D.create(0, 0, this.fieldWidth, this.fieldHeight);
this.renderContext = CanvasContext.create("Playfield",
this.fieldWidth, this.fieldHeight);
this.renderContext.setBackgroundColor("black");
// Add the new rendering context to the default engine context
Engine.getDefaultContext().add(this.renderContext);
},
/**
* Called when a game is being shut down to allow it to clean up
* any objects, remove event handlers, destroy the rendering context, etc.
*/
teardown: function(){
this.renderContext.destroy();
},
/**
* Return a reference to the render context
*/
getRenderContext: function(){
return this.renderContext;
},
/**
* Return a reference to the playfield box
*/
getFieldBox: function() {
return this.fieldBox;
}
});
return MyFirstGame;
});
Save the file in your new game folder as game.js.