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