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
License
MIT License.
Docs version .8