Tabageos: Tads Basic Game Objects

Create tile based html5 games quickly.

Example Quick Platformer

<html>
	<head><title>Quick Platformer</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tabageos/tabageos/tbgs_min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tabageos/tabageos/ControllerPad.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/tabageos/tabageos/ControllerPad.css">
	</head>
	<body>
        <!--  The code below is exactly what is used to display the small game scene below  -->
        <div id="container" style="position:relative;width:168x;">
			<div id="root" style="position:relative;width:168px;height:144px;top:0px;left:0px;"> </div>
            <div id="controller" > </div>
        </div>
        <script type="text/javascript">
        (function() {
            var scene = [
                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1],
                [1,2,2,2,0,0,0,0,0,1,0,0,1,0,0,0,0,2,2,2,1],
                [1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1],
                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
            ];
            function QuickGame() {
                var specs = {gWidth:336, gHeight:144, controllerDivId:"controller", gameScale:0, gameLoop:this.loop, initializationSpecifics:this.setup}
                tabageos.GameSkeleton.call(this, specs);
            }
            QuickGame.prototype = Object.create(tabageos.GameSkeleton.prototype);
            QuickGame.prototype.setup = function() {
                this.player = new tabageos.BasicNinja(16,32,16,16, scene,null,1,0,16,16,scene.length,scene[0].length,0);
                this.player._directCanvasObject = this.charLayer;
                this.player._autoAnimate = 1;
                this._cameraType = 1;
                var cValues = {1:"#6495ed",0:"#FFFFFF", 2:"#212121"};
                tabageos.BlitMath.drawSquaresFromPattern(this.display, scene, 16, 16, cValues);
                this.removeHUD();
            };
            QuickGame.prototype.loop = function(){ var cb = this.controller.buttons;
                this.player.move(cb.left,cb.right, cb.up || cb.a, cb.down);
            };
            new QuickGame();
            if(tabageos.seekTouch()) { //if a touch screen is detected then a touch controller will appear below the game.
                //because the game is in the middle of other content, the controller would show on top of some of that content if we do not adjust for the controller.
                //so we add 144, the height of the controller, to the games container which pushes down the rest of the content making space for the controller.
                //try it out on your phone, or by using dev tools. One can expand the area to then play the game with the controller.
                //in a normal situation the game would be the only thing on the page/iframe.
                //nevertheless this is a good example of how to stick a game in the middle of other content.
                //the key parts being this offset when the controller is shown, and position:relative instead of absolute in the container div style.
                //the GameSkeleton Class is handling transformations and horizontal position in the parent element.
                document.getElementById("container").style.height = "288px";
                document.getElementById("container").height = 288;
            }
        })();
        </script>
    </body>
</html>

Click or touch start then use wasd or arrows or the touch controller to move and jump.

Class Structure

Core Classes:

The core Classes that just about every game would use are;

  • CanvasObject The CanvasObject Class controls and references a html canvas element, with methods such as getPixel/setPixel and copyPixels.
  • CanvasAnimation A Class that controls animation onto a CanvasObject.
  • BlitMath A Class of static methods that aid in drawing scenes from a tileset.
  • GeometricMath A class of static methods that aid various geometry calculations and basic collision stuffs.
  • TweenMath The TweenMath.tweenArray method returns an Array of the numbers that make up a given tween from the given start and end values.

Character Classes:

  • "Skeleton" Classes are more or less abstract classes. They have some inner workings, but not full implementations.

  • "Map" Classes collide with the 2D tile map Array given to them. Either with or without jumping ability.

  • "Traveler" Classes have advanced movement behavior methods such as easeTo, circle and wander.

  • BlittedTraveler and its line of Classes do not directly implement collision detection but rather have methods and hooks ready for collision stuffs.

Quick Exmaples

These are various examples. https://www.tabageos.com/examples

Full Playable Games

https://www.tabageos.com/arcade

License

MIT License.

Docs version .7