Tabageos: Tads Basic Game Objects

Create tile based html5 games quickly.

Example Quick Platformer

	<head><title>Quick Platformer</title>
		<script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>
        <link rel="stylesheet" type="text/css" href="">
        <!--  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>
        <script type="text/javascript">
        (function() {
            let scene = [
           class QuickGame extends tabageos.GameSkeleton {
               constructor() {
 	               var specs = {gWidth:336, gHeight:144, controllerDivId:"controller", gameScale:0, gameLoop:this.loop, initializationSpecifics:this.setup}
                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;
 	                tabageos.BlitMath.drawSquaresFromPattern(this.display, scene, 16, 16, {1:"#6495ed",0:"#FFFFFF", 2:"#212121"});
                loop = function(ts) {
 	                this.player.move(this.controller.buttons.left,this.controller.buttons.right, dthis.controller.buttons.up || this.controller.buttons.a, this.controller.buttons.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;

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.


The one framework Class is the GameSkeleton Class, by extending it you get;

  • Title screen and game over screen automatically set up, then you just draw on them
  • Control for keyboard and touch already setup, and one property usb game pad setup, just set enableGamepad to 1.
  • automatic scene changes
  • Built in default level select display and buttons
  • Easy button setup
  • pixel typing methods for crisp text at any size and animating pixel type, built in pixel fonts
  • easy lighting effects

Quick Exmaples

These are various examples.

Full Playable Games

Robot Street Obliteration

Idle City Sim 2051


MIT License.

Docs version .8