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() {
            let 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]
            ];
           class QuickGame extends tabageos.GameSkeleton {
               constructor() {
 	               super();
 	               var specs = {gWidth:336, gHeight:144, controllerDivId:"controller", gameScale:0, gameLoop:this.loop, initializationSpecifics:this.setup}
 	               this.initialConstruction(specs);
                }
                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"});
 	                this.removeHUD();
                }
                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;
            }
        })();
        </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.

Framework:

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. https://www.tabageos.com/examples

Full Playable Games

Robot Street Obliteration

Idle City Sim 2051

License

MIT License.

Docs version .8