Tile game sample source code

For this example, the scene containing the tile game model is loaded and then some custom logic is programmed into the page for the scene to interact with the user.

Sample page
    <title>Axis Engine Tile game Sample</title>
    <script type="text/javascript" src="http://www.palitri.com/vault/axis/engine/web/current/AxisEngine-min.js"></script>
    <script type="text/javascript">
        function Initialize() {
            var emptySpotPos, transitionStartPos;
            var transitionState, transitionTile = null;
            // Create an object to handle the HTML canvas with id='viewport' and pass a function for continuous rendering
            var viewport = new AxAnimationElement("viewport");
            // Create the axis engine object, ready to render onto the canvas
            var axis = new Axis(viewport.canvas);
            // Import a scene and when loading is done, start rendering
                function() {
                    // Get position of the empty spot. It has the save X and Z as the center right tile and an Y as the bottom tiles
                    emptySpotPos = axis.FindResource("Tile06", AxResourceType.Transform).GetPositionIntrinsic();
                    emptySpotPos.y = axis.FindResource("Tile08", AxResourceType.Transform).GetPositionIntrinsic().y;
                    // Set up an input model to use mouse X and Y input to rotate the game while the left mouse button is pressed
                    axis.inputModels.Add(new AxRotationInputModel(axis, axis.FindResource("parent", AxResourceType.Transform), 1.0, 5.0,
                        "Mouse Y""""""Mouse X""""""Mouse Left"));
            // When mouse is clicked, pick the object under the cursor, check if its next to the empty spot and if so, start moving it
            viewport.OnMouseDown = function(x, y, button) {
                if (transitionTile === null) {
                    if (axis.PickByPixelSpaceCoords(new AxVector2(x, y))) {
                        // If a tile transform is picked and it is next to the empty spot, start moving it by setting transitionTile
                        if (axis.screenPickEvents.entityInfo.transformRef.name.StartsWith("Tile")) {
                            transitionStartPos = axis.screenPickEvents.entityInfo.transformRef.GetPositionIntrinsic();
                            if ((emptySpotPos.Subtract(transitionStartPos).GetLength() - 66.0) < 1.0) {
                                transitionTile = axis.screenPickEvents.entityInfo.transformRef;
                                transitionState = 0.0;
            // Gets called continuously by the AxAnimationElement element when rendering
            viewport.OnRender = function Render() {
                // If a tile is in transition, set its location between its original position and the empty slot position
                if (transitionTile !== null) {
                    transitionState += axis.timer.time * 2.0;
                    transitionTile.SetPositionIntrinsic(transitionStartPos.Lerp(emptySpotPos, AxMath.Min(transitionState, 1.0)));
                    // If transition is completed, save the new empty spot position and set the transitioning tile to null
                    if (transitionState >= 1.0) {
                        emptySpotPos = transitionStartPos;
                        transitionTile = null;
<body onload="Initialize();" style="margin:0;">
    <canvas id="viewport" style="width:100%; height:100%;"></canvas>


This example consists of a single canvas element inside of the body of the page.

The body element has its onload event set to call the Initialize() method, where the whole initialization and rendering is set up.
The canvas element has its id set to viewport. This id will be used by the JavaScript code to identify the element and use it for rendering.


The whole setup of the 3d scene and rendering is performed in the Initialize() method.

A viewport object is created to utilize the Html Canvas element for rendering and an instance of the Axis engine is created as usual.

The emptySpotPos variable holds the location of the empty tile spot.
The transitionStartPos holds the initial position of the tile which is being moved.
The transitionState holds the progress of the transition from tile's initial location to the empty spot location, and ranges from 0.0 to 1.0, where at 0.0 the tile is at its initial position and at 1.0 the tile is at the position of the empty spot.
The transitionTile holds a reference to the AxTransform object for the tile in transition. A null value denotes that no tile is in transition.

The ImportScene method loads the scene file asynchronously and in its callback, the location of the empty tile spot is determined by taking the X and Z coordinates of the tile above it and the Y coordinate of the tile to its left. X is the horizontal axis, Y is the vertical and Z is depth.
Then, an AxRotationInputModel is set to rotate the whole tile game according to mouse input and continuous rendering is started.

The viewport's OnMouseDown event fires when the vieport's Html Canvas element is clicked. It is set to pick the tile under the mouse cursor and if it's next to the empty spot, start a transition to move it towards the empty spot.
First, it checks whether a tile is not already in motion, then picks the object under the mouse cursor. If that object's name starts with "Tile", then it is indeed a tile and a candidate for being moved.
Then the distance between the selected tile and the empty spot is measured. If it's about 66 units (the size of one tile), then the tile is right next to the empty spot and a transition can start.
A transition is initiated simply by setting the transiionTile reference and the transitionState variable.
The transition itself is continuously handled in the viewport's OnRender() event.

The viewport's OnRender() event is set to render the scene and process the transition of tiles.
If the transitionTile variable is not null, this means that a tile is in transition.
The transitionState value is changed at a rate of 2.0 units per second, meaning a full transition from 0.0 to 1.0 will be performed in half a second.
The tile in transition is moved by setting its position according to the transitionState variable by linearly interpolating between the tile's initial position and the empty spot's position. This is done by transitionStartPos.Lerp, which is a method of the AxVector3 prototype class.

Finally, when transitionState reaches 1.0, the emptySpotPos is set to the initial location of the moved tile, which location is now empty and the transitionTile is set to null to denote that no transition is in action.

Comments on Tile game sample