GameSkeleton

GameSkeleton

Game framework Class. Organizes the use of the various tabageos Classes for the creation of a game with title screen, main camera and game over screen. Has just about everything needed for the framing of any game. The way it should be used is to extend it via the Object.create method, then in the constructor function you call; GameSkeleton.call(this,specs); When set up, all the properties and methods of this class would be available to your extending class via "this".


Constructor

new GameSkeleton(specs)

Constructs a new GameSkeleton instance, this constructor should generally not be used. To use the GameSkeleton class you should extend it. Create a class that will extend GameSkeleton and within that class constructior call GameSkeleton.call(this, specs);

	function MyGame() {
		var specs = { ... };//see below for details of the specs Object.
		tabageos.GameSkeleton.call(this, specs);
	}
	MyGame.prototype = Object.create(tabageos.GameSkeleton.prototype);
	MyGame.prototype.setupSpecifics = function() {
		//your game setup specifics, all properties of GameSkeleton available via 'this'
		//skin related stuffs would happen here, title styling, level setup, etc...
	};
	MyGame.prototype.loop = function() {
		//your specific game mechanics, all properties of GameSkeleton available via 'this'
		//the meat of the game goes here, stuff that should happen every frame.
	};
 	new MyGame();
Parameters:
Name Type Description
specs Object

An Object defining the specifics of the game.

 The default value is:
	{ gWidth:640, gHeight:320,cameraWidth:320, cameraHeight:320, 
	cameraFollowOffsetX:-160, cameraFollowOffsetY:0,  tileW:16, tileH:16, 
	spriteSheetImage: null, containerDivId:"container", rootDivId:"root",
	controllerDivId:"controller", gameScale:2, useScreenOrganizer:true,startWidth:50, startHeight:25,
	controllerHeight:144, initialLives:3, initPlayerPosition:new tabageos.MoverPoint(32,32), 
	gameLoop:null,initializationSpecifics:null, 
	addedResizeMethod:null, sceneResetSpecifics:null,fullResetSpecifics:null, additionalSceneResetSpecifics:null, 
	positionResetSpecifics:null, cameraType:2, backgroundColor:"#FFFFFF" }
Properties
Name Type Description
gWidth Number

The total width of the game play area. If set to more than 4000 it is assumed that setupForRenderFromMap is going to be used. This number should be less than 4000 unless your making an endless runner style game and therefore using the setupForRenderFromMap method on layer 2, the display layer. To accomplish an endless not auto moving scene, you can use just 1 scene, when the player goes out of camera view left or right it would loop back, or you can make many different scenes being sure to add each one to the sceneChanger using sceneChanger.addScene.

gHeight Number

The total height of the game play area. This number should be less than 4000.

camearWidth Number

The cameras width, if gWidth is bigger than this, the camera only shows what is within its viewport, and would need to move to show more.

cameraHeight Number

The cameras height, if gHeight is bigger, the camera only shows what is within its viewport, and would need to move to show more.

cameraType Number

defines if the camera should automatically move. Setting camearType to 1 would make it follow the player around, by default the camera does not move, cameraType is 2 by default for the justRender method of the camera. To move it yourself in your loop method, you would set cameraType to 0, and in your loop method reference the camera as 'this.camera'. See BasicCamera for the various camera movement methods available, by default when cameraType is 1, this class will use the tweenedBlitLayerRender method of the camera.

cameraFollowOffsetX Number

defines the horizontal camera offset when following the player, the default is negative half the camera width.

cameraFollowOffsetY Number

defines the vertical camera offset when following the player, the default is 0, by default the camera only moves horizontally. When cameraHeight and gHeight are the same, the camera does not need to move vertically. Same is true for horizontal gWidth and cameraWidth.

backgroundColor String

An html color value string that will be the background color of backgroundLayer. You can also draw to backgroudLayer to change the background.

tileW Number

defines the width of each tile in your sprite sheet. Default is 16.

tileH Number

defines the height of each tile in your sprite sheet. Default is 16.

controllerHeight Number

defines the height of the controller, the width will be the same as the cameraWidth.

initialLives Number

The initial amount of lives the player has, default is 3.

initPlayerPosition MoverPoint

A MoverPoint defining the initial player position on screen.

spriteSheetImage String

The name of your image, use the full path if it is not in the same folder as the games code. If this is null it is assumed to just draw squares. To streamline the loading of your sprite sheet this value needs to be set to 'streamline' and then you would use tabageos.loadSpriteSheetAndStart.

containerDivId String

The id of the html div that is the container of both root and controller.

rootDivId String

The id of the html div that is the games root, it should be inside of the container div and have nothing inside of it.

controllerDivId String

The id of the html div that will be the controller, it should be inside of container and underneath, not in, root. If this value is not set a controller is not created.

<div id="container" style="position:absolute;width:640px;">
  <div id="root" style="position:relative;width:640px;height:272px;"></div>
  <div id="controller" > </div>
</div>
gameScale Number

The scale of the game, 0 for no scale, 1 for full screen, greater than 1 for less than full screen, 2 is half size. 3 is smaller

useScreenOrganizer Boolean

Default is true, whether to use a ScreenOrganizer or not, if false no title screen or game over screen is set up.

startWidth Number

The width of the start button on the title screen. You can reference the start button itself with "this.startButton" the start button is an html div element.

startHeight Number

The height of the start button on the title screen.

startLocations MoverPoint

A MoverPoint defining the left and top position of the start button. The start button is a div referenced with this.startButton

gameLoop function

your loop method that defines the specific mechanics of the game.

initializationSpecifics function

a method that does additional setup related things. Typically you would setup the player and levels in this method.

addedResizeMethod function

a method that does additional resizie related things, it would happen after the default resizing happens. By default the game will fill the screen if gameScale is 1, it will not scale if gameScale is 0, and it will be smaller from values greater than 1. when the game is smaller than the page it will be in the middle. addedResizeMethod is sometimes needed in cases where you have other stuff on the page besides the game.

sceneResetSpecifics function

A method that would happen just before the scene is reset. By default nothing happens on reset just the ScreenOrganizer will show the transition. To have something happen create a method that does things (this method happens before the transition starts) and pass it as this param or as specs.additionalSceneResetSpecifics. As with all these methods, the 'this' inside of them would be able to reference all GameSkeleton properties.

fullResetSpecifics function

A method that would happen as the game is reseting to the title screen. Typically you would use this to clear out Objects you have created and to stop event listeners you have made. If you have not added any objects other than defining the player, you would not have to worry about this method. if you have for example many enemies made, this method would be used to destroy them before the game resets.

additionalSceneResetSpecifics function

A method that is similar to sceneResetSpecifics but would happen when the transition covers the screen. sceneResetSpecifics would happen before the transition, and additionalSceneResetSpecifics would happen when the screen is covered.

topDownSceneChange Number

If set to 1 then up and down scene changes will happen automatically as well. By default, when there is a sceneChanger being used, only left and right scene changes happen.

underCoverSpecifics function

A method that would happen after the levelComplete method is used and the screen is covered. See levelComplete.

useSceneChanger Boolean

Default is true, by default a TileSceneChanger is being used referenced with this.sceneChanger. If you have more than one scene, or you want your character to be able to loop your one scene, scenes need to be added to the sceneChanger using this.sceneChanger.addScene.

initForISO Number

This needs to be set as 1 if your making an isometric scene using the iso classes.

disableBackgroundAlpha Number

Disable the backgroundLayer alpha, default is 1, it is disabled by default, by default the background has no alpha, if your doing parallax, or need background alpha you want to set this to 0.

positionResetSpecifics function

A method that would change the position of the player during reset. By default the position of the player does not change on reset.

beforeStartGameLoop function

An optional method to call that would happen just before the game loop is started

tweenLimitX Number

Optional defining of the cameras horizontal tween limit, default is 0.

tweenLimitY Number

Optional defining of the camera vertical tween limit, default is 0.

cameraTweenType String

Optional defining of the camera tween type default is 'InOutLinear'.

enableGamePad Boolean

Default is false, when true and the user has a usb game pad plugged in, when they press any directional button on their pad for the first time they will then be promted to assign each non-directional button. And then they'll be playing with their controller. When usb game pad use is needed, instruct the user to press one of the directionals (not other buttons) and then to follow the on screen propmpts. The GameSkeleton is using enableGamePad to control a call to ControllerPad.gamePadButtonsUserDefined and ControllerPad.handleGamePad. For more info about how usb game pad input works see ControllerPad.js You can ignore this property and use the ControllerPad Class for yourself if for example you want to use predefined button configurations that you know all your users will have.

frameRate Number

Optional frameRate definition, default is 60.

hudScale Number

Default is same as gameScale, can be used to scale the hud differently

walkthroughLink String

Link for the question mark hud button. Default is an empty string. It would open in a new page. when this is not defined nothing happens when the question mark is selected.

priorToSceneChange function

An optional method that would happen before a scene change. [not reset]

afterSceneChange function

An optional method that would happen after a scene change. A scene reset is reseting the current scene, a scene change is changing to a different scene either by walking off screen or using the moveBackOneScene/FowardOneScene/gotoSceneByDoor/transitionToSceneByDoor methods.

specialControllerUse Boolean

If true then the controller is not automatically resized, and no buttons are set up. Default is false. By default ControllerPad.basicControllerButtonSetup is used and ControllerPad.assignStartAndBackMethods is used to assign this.maybeStartGame and this.maybeGoBack to the start and back controller buttons.

Members

(static) _str

see tabageos.loadSpriteSheetAndStart in Utils.

(static) game :GameSkeleton

The instance of the constructed GameSkeleton, this is set during construction.

Type:

__specs

__worker :Worker

A Worker created by the initWorkerLoop method. by default this worker is set up during construction.

Type:
  • Worker

__workLoop :Number

When 1 and the __worker has been made then _loop is happening from the worker.

Type:
  • Number

_healthBar

Inside of _playerHUD by default on the top left of the screen.

_helperPoint :MoverPoint

A helper MoverPoint ready to be used.

Type:

_helperRect :Rectanlge

A helper Rectangle ready to be used.

Type:
  • Rectanlge

_HUD

A reference to the html div element that is the games hud in the right hand upper corner. It has pause mute reset exit and help buttons. It is automatically set up as part of construction.

_image

A reference to the sprite sheet being drawn from.

_initLives

The inital lives that the game started with, default is 3.

_manuelControllerUse

_mute

If 1 then sounds and music will not be heard. Change with the muteUnmute method.

_playerHUD

An html div that is in the top left corner that contains the _healthBar and _scoreTextDisplay html divs. use showHealthBar/hideHealthBar showScoreText/hideScoreText to show/hide and style the playerHUD area.

_scoreTextDisplay

Inside of _playerHUD by default on the top left of the screen.

addedInitializationMethod :function

Optionally set as part of the specs Object during construction

Type:
  • function

addedResizeMethod :function

A method that does additional resizie related things, it would happen after the default resizing happens. By default the game will fill the screen if gameScale is 1, it will not scale if gameScale is 0, and it will be smaller from values greater than 1. when the game is smaller than the page it will be in the middle. addedResizeMethod is sometimes needed in cases where you have other stuff on the page besides the game.

This method is typically defined during construction as part of the specs param.

Type:
  • function

additionalSceneResetSpecifics :function

A method that is similar to sceneResetSpecifics but would happen when the transition covers the screen. sceneResetSpecifics would happen before the transition, and additionalSceneResetSpecifics would happen when the screen is covered. See the specs param of the constructor.

Type:
  • function

afterSceneChange :function

See the specs param of the constructor.

Type:
  • function

alternateLoopMethod :function

A method that will replace the loop method, and methods utilize this functionality.

Type:
  • function

backgroundColor

The default color for the backgroundLayer, default is "#ffffff".

backgroundLayer :CanvasObject

The background, bottom most layer added as a layer for the camera to draw from.

Type:

beforeStartGameLoop :function

See the specs param of the constructor.

Type:
  • function

camera :BasicCamera

Type:

cameraFollowOffsetX

The horizontal offset amount the camera should follow the player

cameraFollowOffsetY

The vertical offset amount the camera should follow the player

cameraHeight

The height of the camera view.

cameraLayer :CanvasObject

The displayed CanvasObject controlled by the camera.

Type:

cameraTweenType :String

The type of tween the camera will use, default us InOutLinear

Type:
  • String

cameraWidth

The width of the camera view.

charLayer :CanvasObject

charLayer is where characters and projectiles and scenery objects are drawn it's drawn on top of display.

Type:

container

The html div element that is the container of the root and controller html elements.

controller :ControllerPad

A reference to the ControllerPad instance

controllerHeight

The height for the controller

creditsContainer

A property ready to reference something showing credits, its not used by default.

device

If 1 then the device being used is a touch device.

disableBackgroundAlpha

Disable alpha for the backgroundLayer default is true.

display :CanvasObject

The display is where the scene is drawn it is on top of background, camera draws from it after backgroundLayer.

Type:

dontResizeHorizontal

Don't resize horizontally during resize, default is 0.

dontResizeVertical

Don't resize vertically during resize, default is 0.

enableGamePad :Number

If 1 or true then game pad is reeady for use. When true, then when a player presses one of the directional buttons of their game pad, it would prompt for them to define all buttons.

Type:
  • Number

frameRate :Number

The frame rate for the game, default is 60.

Type:
  • Number

frameTime :Number

The frame time, calculated based on frameRate.

Type:
  • Number

fullResetSpecifics :function

A method that would happen as the game is reseting to the title screen. Typically you would use this to clear out Objects you have created and to stop event listeners you have made. If you have not added any objects other than defining the player, you would not have to worry about this method. if you have for example many enemies made, this method would be used to destroy them before the game resets. See the specs param of the constructor.

Type:
  • function

gameFunction :function

your loop method that defines the specific mechanics of the game

Type:
  • function

gameHeight :Number

The height of the game, set in specs during construction.

Type:
  • Number

gameOverContainer :CanvasObjectContainer

This CanvasObjectContainer gets added as the last screen to the screenOrganizer.

gameScale

The scale of the game, default is 1.01, this is set using the specs param during construction.

gameWidth :Number

The width of the game, set in specs during construction.

Type:
  • Number

healthBarIsDisplayed

Will be 1 if health bar is displayed.

hExit

An html div that is part of the hud.

hMute

An html div that is part of the hud.

horizontalCameraMove

When set to greater than 0 the camera will constantly move horizontal instead of following the player.

hPause

An html div that is part of the hud.

hReset

An html div that is part of the hud.

hudScale

The scale of the hud, default is 1.01, this is set using the specs para during construction.

hWalkthrough

An html div that is part of the hud.

initForISO :Number

This needs to be set as 1 if your making an isometric scene using the iso classes.

Type:
  • Number

initialPlayerPosition

An optional MoverPoint defining the inital x and y location of the player. Set during construction as part of the specs param.

lives

The lives of the player, default is 3.

mouseIsDown

If setupMouseTouchHandle has been called with 1 as a param, this property denotes if the mouse/touch is being held down or not.

mouseMoveOffset

Default is 32.

mousePoint :MoverPoint

When setupMouseTouchHandle has been used, this MoverPoint will have the location of the mouse/touch.

Type:

paused

Denotes if the game is paused. Use the pause method to pause and unpause the game.

player

The player property needs to be defined. Normally you would define this property during initializationSpecifics. This property is referenced by various methods and needs to be a MapMover/MapTraveler or extension of.

positionResetSpecifics :function

A method that would change the position of the player during reset. By default the position of the player does not change on reset. See the specs param of the constructor.

Type:
  • function

priorToSceneChange :function

See the specs param of the constructor.

Type:
  • function

resizeRootForNoTouch

When 1 the it is assumed that root is being resized on a desktop.

root

The html element where the game will display, should be inside of the container element. When using a screenOrganizer (which by default a screenOrganizer is used) this property will reference a CanvasObjectContainer that has the actual element as its div property.

sceneChanger :TileSceneChanger

sceneChangeSpecifics :function

See the specs param of the constructor.

Type:
  • function

sceneResetSpecifics :function

A method that would happen just before the scene is reset. By default nothing happens on reset just the ScreenOrganizer will show the transition. To have something happen create a method that does things (this method happens before the transition starts) and pass it as this param or as specs.additionalSceneResetSpecifics. As with all these methods, the 'this' inside of them would be able to reference all GameSkeleton properties. See the specs param of the constructor.

Type:
  • function

scoreTextIsDisplayed

Will be 1 if score text is displayed.

screenOrganizer :ScreenOrganizer

By default this gets set up as a IrisScreenOrganizer with title, cameraLayer, and gameOverContainer screens.

soundSystem :SoundSystem

Type:

speechBubble

A html textarea that is added to/removed from container during the showText/hideText methods. The showText method has params for styling the speechBubble. The methods associated with this property are showText hideText textIsShown and textFinished

startButton

The html div that is the start button It gets added to the div property of the title CanvasObjectContainer.

startLocations :MoverPoint

The left and top location, as x and y, for the start button on the html page.

Type:

tileHeight

The height of each tile in maps, default is 16.

tileWidth

The width of eath tile in maps, default is 16.

title :CanvasObjectContainer

This CanvasObjectContainer gets added as the first screen to the ScreenOrganizer. cameraLayer is added as the second screen and gameOverContainer is the last screen. You can add html to the div property of a CanvasObjectContainer, or you can draw to its floor property which is a CanvasObject.

topDownSceneChange :Number

If set to 1 then up and down scene changes will happen automatically as well. By default, when there is a sceneChanger being used, only left and right scene changes happen.

Type:
  • Number

tweenLimitX

The horizontal tween limit for the camera

tweenLimitY

The vertical tween limit for the camera

underCoverSpecifics :function

See the specs param of the constructor.

Type:
  • function

useSceneChanger

Use a TileSceneChanger, default is true.

verticalCameraMove

When set to greater than 0 the camera will constantly move vertically instead of following the player.

Type:
  • String

Methods

(static) establish(gameInstance, spriteSheetImage, containerDivId, rootDivId, controllerDivId, gameScale, useScreenOrganizer, startWidth, startHeight)

This static method is called by the GameSkeleton constructor and should generally not be used. This method sets up GameSkeleton.game._image, calls basicInitalize and does initial resizing of the game. To do everything this method does except ._image setup use the .__instanceBasicTwoLayerResize method on the instance. To recall this method once everything has already been constructed use the ._reEstablish method on the instance. If you want to change your whole sprite sheet on the fly, set it up manually to be GameSkeleton.__sprites as a CanvasObject. Or streamline it using the tabageos.loadSpriteSheetAndStart static Utility method, in which case it would also end up as the GameSkelton.__sprites CanvasObject. then you would just use __sprites.copyPixels to change the sprite sheet itself.

Parameters:
Name Type Description
gameInstance
spriteSheetImage

An html image a CanvasObject or the string 'streamline'

containerDivId String
rootDivId String
controllerDivId String
gameScale Number
useScreenOrganizer Boolean
startWidth Number
startHeight Number

(static) seeAndChanseRoutine(obj, enemies, player, helperPoint, chaseRadius, dontOnlyChaseToX, separationDistance, map, tw, th)

A see and chase routine for enemies, pass the enemy obj and other specs and the enemy will chase the player when it sees it. This routine is for platformers, for top down games simply use .chase and .update of a Traveler class.

Parameters:
Name Type Description
obj MapMover

The enemy that will chase the player

enemies Array

optional, the Array containing obj and the other enemies, if passed, then obj will separate and align with the others in the array.

player MoverSkeleton

the MoverSkeleton for obj to chase

helperPoint MoverPoint

a premade MoverPoint to aid calculations, you can just pass this._helperPoint from the GameSkeleton Class.

chaseRadius Number

The radius from player that obj must be to initiate chase, default is 128.

dontOnlyChaseToX Boolean

default is false, by default obj will only chase the x position of player and will maintain its own y position.

separationDistance Number

this distance to separate from other enemies found in the enemies Array, default is 48.

map Array

optional 2D Array of tile values to collide with, values of 0 or [0,0] would be passable spots.

tw Number

width of each tile in map, default is 16.

th Number

height of each tile in map, default is 16.

__instanceBasicTwoLayerResize()

This method is basically the value of the static GameSkeleton.establish method, but using the instance, therefore no params are needed. if addedResizeMethod has been defined it will be called after resizing.

The styles being used for resizing are using the calc css property, so for example container.style.left will be 'calc(50% - '+ (scaw/2) +'px)';
  where scaw is the scale width or cameraWidth if no scale.

__loopWorker() → {Worker}

Creates a Worker that runs a 16 millisecond loop.

Returns:
Type
Worker

_basicTwoLayerResize(cameraLayer, display, charLayer, cameraWidth, cameraHeight, controllerHeight, containerDiv, controllerInstance, gameScale)

Called by establish and __instanceBasicTwoLayerResize. This method resizes the container based on cameraWidth/Height and gameScale It is handling a call to tabageos.ResizeGame In general this method happens as part of construction and automatically. If you needed to resize the game manually use __instanceBasicTwoLayerResize.

Parameters:
Name Type Description
cameraLayer
display
charLayer
cameraWidth
cameraHeight
controllerHeight
containerDiv
controllerInstance
gameScale

_justGamePad(ts)

A method that can happen as a loop alternate to enable gamePad use while the game is paused.

Parameters:
Name Type Description
ts Number

_loop(ts)

The main game loop, your specific game mechanics should be gameFunction which is defined during construction as part of the specs Object.

Parameters:
Name Type Description
ts Number

_reEstablish(e)

Calls GameSkeleton.establish with instance properties.

Parameters:
Name Type Description
e Event

_theReset()

A full reset of the whole game ending with a call to _reEstablish

addToCustomHud(divID, style) → {Number}

Adds a div to the custom hud.

Parameters:
Name Type Description
divID String

The id for the new div added to the custom hud, you can asign style to the id (in css) to style your custom addition

style String

Style for the new div added to the custom hud, you can style via the id or you can pass in css style directly in this param

Returns:

Returns the part number of this addition, for example if it is the first part added the part number is 1 and so on.

Type
Number

animatePixelParagraph(startX, startY, lineSpace, paragraphTextByDots, canv, fw, fh, speed)

This method needs to be called repeatedly/during a loop to progress. Writes a paragraph of pixel text, letter by letter, each line in the paragraphTextByDots string should be denoted by a dot .

Parameters:
Name Type Description
startX Number

The starting x position to type from

startY Number

The starting y position to type from

lineSpace Number

The line space amount, default is 9

paragraphTextByDots String

String of text with each line ending with a dot .

canv CanvasObject

The CanvasObject to draw on default will be charLayer

fw Number

font text width, default is the same as the tile width of each letter

fh Number

font text height, defaul is the same as the tile height of each letter

speed Number

The speed at which to type each letter, default is 1, less than one will go slower, the value should not be 0 or negative.

animatePixelType(x, y, alphaText, speed, source, canv, lineFromX, lineFromY, tw, th, spacing, fw, fh) → {Number}

This method needs to be called repeatedly/during a loop to progress. Writes pixel text, letter by letter.

Parameters:
Name Type Description
x Number

The starting x position to type from

y Number

The starting y position to type from

alphaText String

String of text to type.

speed Number

The speed at which to type each letter, default is 1, less than one will go slower, the value should not be 0 or negative.

source Img

Source Img to draw from, the img that has the pixel font line. Can be defined for all calls using setPixelTypingSpecs. If the line is in the sprite sheet then this should be; this._image

canv CanvasObject

The CanvasObject to draw to. Can be defined for all calls using setPixelTypingSpecs.

lineFromX Number

The x position in the sprite sheet that the pixel font line begins. Can be defined for all calls using setPixelTypingSpecs.

lineFromY Number

The y position in the sprite sheet that the pixel font line begins. Can be defined for all calls using setPixelTypingSpecs.

tw Number

The width of each tile that each letter of the pixel font line fits into. Default is 10. Can be defined for all calls using setPixelTypingSpecs.

th Number

The height of each tile that each letter of the pixel font line fits into. Default is 10. Can be defined for all calls using setPixelTypingSpecs.

spacing Number

The amount of spacing in between each letter typed, default is 8. Can be defined for all calls using setPixelTypingSpecs.

fw Number

The width of each letter, default is same as tw.

fh Number

The height of each letter, default is same as th.

Returns:

Returns the next character index to be typed or 0 when the alphaText is all typed.

Type
Number

basicInitialize(containerDivId, rootDivId, displayWidth, displayHeight, cameraWidth, cameraHeight, controllerDivId, useScreenOrganizer, startWidth, startHeight, dontUseSceneChanger, justCreateController)

This method is automatically called as part of consctruction of the class.

Parameters:
Name Type Description
containerDivId String
rootDivId String
displayWidth Number
displayHeight Number
cameraWidth Number
cameraHeight Number
controllerDivId String
useScreenOrganizer Boolean
startWidth Number
startHeight Number
dontUseSceneChanger Number
justCreateController Number

calibratePixelType()

see pixelType

callCamera(tsopt, pxoffsetopt, pyoffsetopt, playerPositionopt)

Makes one call to the camera to re render to the screen, for use after reseting the camera.

Parameters:
Name Type Attributes Description
ts Number <optional>

optional delta time

pxoffset Number <optional>

optional added horizontal offset for the cameraPoint

pyoffset Number <optional>

optional added vertical offset for the cameraPoint

playerPosition MoverPoint <optional>

If present will first reset the camera around the player position.

cancelAniFrame()

Cancels the animation frame.

changeHUDBackgroundImage(imageString)

Changes the HUD background image.

Parameters:
Name Type Description
imageString String

The base64 string of the image

changeSceneEnemies(scene) → {Array}

Used to change the current set of enemy Objects being referenced. For example enemies = this.changeSceneEnemies(scene); would make enemies point to the array in the sceneChanger for the given scene.

Parameters:
Name Type Description
scene Number

The number of the scene to get.

Returns:

The enemy Array in the sceneChanger referenced by the scene number

Type
Array

changeSceneScenery(scene) → {Array}

Used to change the current set of SceneryObjects being referenced. For example sceneryObjects = this.changeSceneScenery(scene); would make sceneryObjects point to the array in the sceneChanger for the given scene.

Parameters:
Name Type Description
scene Number

The number of the scene to get.

Returns:

The stored Array in the sceneChanger referenced by the scene number

Type
Array

changeToMainCamera(e)

transitions to the main game screen and starts the main game loop.

Parameters:
Name Type Description
e

createHud()

Creates _HUD and _playerHUD as html div elements, _HUD gets appended to the document body. _playerHUD gets appened to container. _playerHUD containes _healthBar and _scoreTextDisplay.

This method is automatically called as part of construction of a GameSkeleton.

Use the showHUD hideHUD removeHUD, showHealthBar hideHealthBar, showScoreText, hideScoreText and changeHUDBackgroundImage methods to manipulate the HUD and playerHUD.

endLevel(e)

To be called inside an alternate loop, after using levelComplete to initate an alternate loop. Ends the alternate loop and restarts the main loop.

Parameters:
Name Type Description
e

endLevelComplete(e)

Call this to finish and return from having called levelComplete A transition animation will happen then the main loop will start back.

Parameters:
Name Type Description
e

establishKeyEventsForReset()

After you call this method, escape can be pressed to reset position in scene. a transistion would happen and positionResetSpecifics would be called if it is defined.

fullResetToTitle(e)

Resets the game to the title screen.

Parameters:
Name Type Description
e Event

gameComplete(gameCompleteMethod, autoToTitleTime)

Can be called when the game is complete, which switches the main loop to the gameCompleteMethod passed. Same as levelComplete but with less options, this method will switch the main loop to the gameCompleteMethod after 1 second. One second is given to ensure that the main loop has finished, this method causes the main loop to complete first, ending the request for animation frames. So you don't need to put a return after the call to this method, but its ok if you do. If autoToTitleTime is set, then fullResetToTitle will be called after that time, it should be more than 1 second.

Parameters:
Name Type Description
gameCompleteMethod function

The method to switch the main loop to. Will receive a ts time stamp param.

autoToTitleTime Number

If set then after this amount of milliseconds the game will reset to title, needs to be more than 1000 if set.

gameOver(onlyRestPositionOnLooseLife, waitTime)

Subtracts 1 lives, if lives remains the scene is reset, if no lives it switches to the gameOverContainer screen (2) and waits for the start button to be pressed.

Parameters:
Name Type Description
onlyRestPositionOnLooseLife Boolean
waitTime Number

getCustomHudPart(partNumber) → {HTMLDiv}

Returns a reference to a div added to the custom hud via addToCustomHud

Parameters:
Name Type Description
partNumber Number

The number of the div to get. The number will be in the order that you called addToCustomHud.

Returns:

A reference to the html div that was added to the custom hud.

Type
HTMLDiv

goBack(e)

If the game is paused this method would cause a full reset to title. If the game is not paused this method causes a basic scene reset, leading to resetPosition being called.

Parameters:
Name Type Description
e

gotoSceneByDoor(sceneToGoTo)

Goto a scene right away without any transition.

 The order of optional calls that would happen from this method being called is:
   optional priorToSceneChange  if it has been set
     Then the sceneChanger changeScene method is called 
   then optional afterSceneChange  if it has been set
   then camera renderB1 and camera renderB2 to draw the scene.

  The difference between this method and transitionToSceneByDoor
  is that transitionToSceneByDoor does a transition first then calls the above methods as the transition ends.
Parameters:
Name Type Description
sceneToGoTo Number

The number of the scene to go to.

handleMouseTouchMove(e)

Set up by the setupMouseTouchHandle method, handles mousemove, touchmove and pointermove down/up events. Calculates the cords of the touch/mousedown position, and puts them in mousePoint.x and mousePoint.y

Parameters:
Name Type Description
e Event

hideCustomHud()

Hides the custom hud (same as hideHealthBar)

hideHealthBar()

Hides the health bar.

hideScoreText()

Hides score text.

hideText()

Hide any text that was shown via showText

hudExit(e)

This method gets set up as the event handler for the x button in the hud. If not on the title screen will cause a reset to the title screen.

Parameters:
Name Type Description
e

hudToWalkthrough(e)

This method gets set up as the event handler for the question mark in the hud. If walkthroughLink has been defined and includes 'http' then when the question mark in the hud is clicked/touched the link would open in a new tab.

Parameters:
Name Type Description
e

includeShake(time)

Used by the shake method.

Parameters:
Name Type Description
time Number

Amount of time to shake in milliseconds

initWorkerLoop()

Creates a Worker that runs a 16 millisecond loop. And sets _loop to run on that independent loop. This method is called as part of basicInitialize which is called as part of construction.

levelComplete(levelCompleteMethod, levelCompleteTime, dontRunAlternate)

Can be called when a level is complete, or to simply do something else using the main loop, it will switch the main loop to the levelCompleteMethod passed.

To give back the loop to the game loop method you can set _doAlternate to 0, which would switch it back immediately. Or you can call endLevelComplete() which will show a transition and then set _doAlternate to 0 for you, potentially calling positionResetSpecifics, and then underCoverSpecifics, before the transition ends. Or you can pass a levelCompleteTime which will cause endLevelComplete to happen after that time.

If you want to sleep the main loop for a time, you would use this method with an empty levelCompleteMethod passed in, for example this.levelComplete(function(ts) {}, 7000); would cause the game to effectively pause for 7 seconds, afterward show transition and resume

Parameters:
Name Type Description
levelCompleteMethod function

The function that should replace the main loop, ts time stamp will be passed to it.

levelCompleteTime Number

Optional millisecond amount of time until main loop should resume, main loop will resume after this amount of time if set.

dontRunAlternate Boolean

It true the alternate loop will run but void of the levelCompleteMethod, it would just be like a pause in the thread So if you set this to true and do not pass a levelCompleteTime, what happens is that the game effectively pauses, but you would need to call endLevelComplete to come out of it, or set _doAlternate to 0.

maybeGoBack(e)

During basicInitialize this method is added as the back button handler of the controller.

  If the currentScreen of the screenOrganizer is the game over screen, then this method causes hudExit.
  If the currentScreen of the screenOrganizer is the main game screen, then this method causes goBack.
Parameters:
Name Type Description
e

maybeStartGame(e)

During basicInitialize this method is added as the start button handler of the controller. On the title screen, changeToMainCamera would be called. On the main game screen pause would get called. On the game over screen hudExit would get called.

Parameters:
Name Type Description
e

moveBackOneScene()

You can call this method to go back to the previous scene, it would be like calling gotoSceneByDoor, but for just going back to whatever scene is previous. These move methods are working with the sceneChanger.

moveDownOneScene()

Change to the scene beyond the current scene. 2 + 1 This method is using the sceneChanger.

moveForwardOneScene()

You can call this method to go foward one scene. This method is using the sceneChanger.

moveUpOneScene()

Change to the scene previous to the current. 2 - 1. This method is using the sceneChanger.

muteUnmute(e)

Mutes or unmutes any sound/music playing. This method gets added as the event handler for the sound button in the hud.

Parameters:
Name Type Description
e Event

pause(e)

Pauses and unpauses the game.

Parameters:
Name Type Description
e Event

pixelDialogBox(dialog, dx, dy, tx, ty, lineSpace, animate, speed, fw, fh, canv, dialogBackFromRect, source)

Displays a dialog box and text. This method does not position the text so that it is only with the bounds of the box, you will need to test and adjust the length of your sentences as needed. For large amounts of text the default ClintBlock font is most likely big, use the OldSchool font instead or a custom pixel font that is 5x5 or less. By default the dialog space available is 210x50. You can change that via the optional params.

To have the dialog appear above everything be sure to call this method last in the loop. Or you can add a layer to the camera just for displaying text. If you use the display as the canv the dialog box will not be cleared. By default charLayer is used which means unless you keep calling this method or stop the loop, the dialog disapears on the next iteration of the game loop.

Parameters:
Name Type Description
dialog String

The string to type, each new line should end with a dot .

dx Number

The x position of the dialog box

dy Number

The y position of the dialog box

tx Number

The x position of the text

ty Number

The y position of the text

lineSpace Number

The line space amount, default is 9

animate Boolean

If true then the text is displayed one letter at a time based on speed, and this method would need to be called repeatedly (called in a loop) to progress.

speed Number

The speed at which to type each letter, default is 1, less than one will go slower, the value should not be 0 or negative.

fw Number

font text width, default is the same as the tile width of each letter

fh Number

font text height, defaul is the same as the tile height of each letter

canv CanvasObject

The CanvasObject to draw on, default will be charLayer.

dialogBackFromRect Rectangle

Optional Rectangle defining the location of your custom dialog background image in the source. By default a 210x50 paperish looking dialog background is used.

source Image

Optional source image for the dialog background, if your using a custom background from the sprite sheet this param should be the sprite sheet; this._image.

pixelParagraph(startX, startY, lineSpace, paragraphTextByDots, canv, fw, fh)

Writes a paragraph of pixel text, each line in the paragraphTextByDots string should be denoted by a dot .

Parameters:
Name Type Description
startX Number

The starting x position to type from

startY Number

The starting y position to type from

lineSpace Number

The line space amount, default is 9

paragraphTextByDots String

String of text with each line ending with a dot .

canv CanvasObject

The CanvasObject to draw on default will be charLayer

fw Number

font text width, default is the same as the tile width of each letter

fh Number

font text height, defaul is the same as the tile height of each letter

pixelType(x, y, alphaText, source, canv, lineFromX, lineFromY, tw, th, spacing)

Types pixel text. There are 3 pixel fonts built into the GameSkeleton Class; ClintBlock OldSchool and GoodNeighbors. You can change which one is used by calling useClintBlockFont, useOldSchoolFont, or useGoodNeighborsFont. By default ClintBlock is used.

Or you can use your own custom pixel font by including it as a line of text in your sprite sheet. (or you can load the line as an image and pass it in as the source) The pixel font needs to be in one straight horizontal line in your sprite sheet, take note of the x,y start of the line, and the width and height of each tile that each letter is in, the start of the numbers (0-9) from the beginning of the line, the start of the lower case letters (a-z) from the beginning of the line, and the start of the upper case letters from the beginning of the line.

Then, first call calibratePixelType with the start of the numbers, and the starts of the letters, and the tile width and height. then you can call setPixelTypingSpecs to set all the specs this method, pixelType, will use, or you can keeping passing them into this methods call.

  So, for example, lets say we have a line of pixel font in the sprite sheet and that line starts at position 500,500.
  And, lets say that each letter is spaced 8x8, 
   so our tile spacing when looking at the font in our image editor (like GIMP) is 8x8. 
  There are some other characters in the line before the number chacters most likely,
  we select from the beginning of the line up to the start of the zero, and the length of that selection is the start of the number characters.
  we select from the beginning of the line up to the start of the "a", and the length of that selection is the start of the lower case letter characters.
  we select from the beginning of the line up to the start of the "A", and the length of that selection is the start of the upper case letters.

     And those are the values we need to set everything up; the x,y position of the font line in the sprite sheet
      the width/height of each character tile
      the start of the number characters, and the starts of the letter characters.

  1. calibratePixelType(start of the number characters, start of lower case leetters, start of upper case letters, tile width, tile height)
                      for example (150,320,160,8,8)
               [if any character set is not in your line, for example if there are no upper case, then you would put null for upper case, not 0]
  2. setPixelTypingSpecs(source, canvas, x position of the font line, y position of the font line, tile width, tile height, spacing)

      Then you can use this method, pixelType, with just the first three params, to type your custom pixel text.
           The cords being used to position the text are the full gameWidth and height.
Parameters:
Name Type Description
x Number

x position to type at

y Number

y position to type at

alphaText String

String of text to type.

source Img

Source Img to draw from, the img that has the pixel font line. Can be defined for all calls using setPixelTypingSpecs. If the line is in the sprite sheet then this should be; this._image

canv CanvasObject

The CanvasObject to draw to. Can be defined for all calls using setPixelTypingSpecs.

lineFromX Number

The x position in the sprite sheet that the pixel font line begins. Can be defined for all calls using setPixelTypingSpecs.

lineFromY Number

The y position in the sprite sheet that the pixel font line begins. Can be defined for all calls using setPixelTypingSpecs.

tw Number

The width of each tile that each letter of the pixel font line fits into. Default is 10. Can be defined for all calls using setPixelTypingSpecs.

th Number

The height of each tile that each letter of the pixel font line fits into. Default is 10. Can be defined for all calls using setPixelTypingSpecs.

spacing Number

The amount of spacing in between each letter typed, default is 8. Can be defined for all calls using setPixelTypingSpecs.

playMusic(soundString, loop, stype)

plays the music as defined by its soundString name. By default soundString +".ogg" would be loaded. Only 1 music track can play at a time, when this method is called any previous tracks are cleared

Parameters:
Name Type Description
soundString String

The name of the sound, by default the sound to load will be soundString + ".ogg"

loop Number

loop the track, defalt is 1 true, the track will keep replaying by default.

stype String

Optional alternate type of sound to load/ending of file name, default is '.ogg' which is added to soundString.

playMusic(soundString, loopopt, stypeopt)

Loads and plays music. Quick sounds should be loaded and played with playSound. When called with different music the first track stops.

Parameters:
Name Type Attributes Default Description
soundString String

The name of the music track to play, by default it will play soundString".ogg", to change what type is loaded use the stype param.

loop Number <optional>
1

To loop the track or not, default is 1, it loops by default.

stype String <optional>
".ogg"

The type of music file to load, default is '.ogg'.

playSound(soundString, poolAMount, stype)

plays the sound as defined by its soundString name. If the sound is not already loaded it will be loaded. By default soundString +".ogg" would be loaded. It will load and create a default pool of 2, with a pool quick back to back full one shots are possible, increase the optional poolAmount as needed. The stype param can be used to change the type.

Parameters:
Name Type Description
soundString String

The name of the sound, by default the sound to load will be soundString + ".ogg"

poolAMount Number

optional amount to pool the sound, default is 2.

stype String

Optional alternate type of sound to load/ending of file name, default is '.ogg' which is added to soundString.

playSound(soundString, poolAmount, stypeopt)

Loads and plays a sound.

Parameters:
Name Type Attributes Default Description
soundString String

The name of the sound to play, by default it will play soundString".ogg", to change what type is loaded use the stype param

poolAmount Number

The number of sounds to pool, if the sound is going to be a quick fire sound, like a bullet, then it needs to be pooled at least by 2 or 3.

stype String <optional>
".ogg"

The type of sound file to load, default is '.ogg'.

readyHorizontalCameraMove()

Readys the camera for auto horizontal movement, call this to horizontally align the camera to the player for auto horizontal movement, auto horizontal movement is achieved by setting horizontalCameraMove to a number greater than 0. in your setup method you would call this method if you have also set horizontalCameraMove to greater than 0. the camera would align with the player based on cameraFollowOffsetX and continue to move horizontally based on the vale of horizontalCameraMove.

If you don't call this method then the camera may not be aligned with the player when it starts auto moving.

readyVerticalCameraMove()

Readys the camera for auto vertical movement, call this to vertically align the camera to the player for auto vertical movement, auto vertical movement is achieved by setting verticalCameraMove to a number greater than 0. in your setup method you would call this method if you have also set verticalCameraMove to greater than 0. the camera would align with the player based on cameraFollowOffsetY and continue to move vertically based on the vale of verticalCameraMove.

If you don't call this method then the camera may not be vertically aligned with the player when it starts auto moving.

removeCustomHudParts()

Removes all divs added with addToCustomHud

removeHUD()

removes all HUD event listeners and removes the _HUD from the document body, and removes _playerHUD from container.

reset(e)

This methos is used internally by other methods to reset scene or position.

Parameters:
Name Type Description
e Event

A key event, or Object, with keyCode of 82, 299 or 399. 82 would reset position, 299 would change/reset the scene, and 399 would end the level.

resetPosition(e)

Potentially calls positionResetSpecifics if it has been set. Restarts the main loop.

Parameters:
Name Type Description
e

resetScene(e)

Potentially calls positionResetSpecifics then additionSceneResetSpecifics, if they have been defined. Then restarts the main game loop after 1 second.

Parameters:
Name Type Description
e

setPixelTypingSpecs(source, canv, lineFromX, lineFromY, tw, th, spacing, font)

Sets specs for the pixelType method.

see pixelType

Parameters:
Name Type Description
source Img

The source image that has the pixel font line

canv CanvasObject

The CanvasObject to draw to.

lineFromX Number

The starting x position of the pixel font line in the source.

lineFromY Number

The starting y position of the pixel font line in the source.

tw Number

The width of each tile that each letter fits into.

th Number

The height of each tile that each letter fits into.

spacing Number

Spacing between each letter that will be typed.

font Number

Default font to use, 1, 2 or 3. 1 for ClinBlock, 2 for OldSchool, 3 for GoodNeighbors.

setupCustomHealthHud(backgroundId)

Setup a custom hud. It's called setupCustomHealthHud because the _healthBar div is being used, but you can utilize html to style/position it in any way.

By default there is a right side HUD with 4 buttons and on the left a basic health bar is displayed using calls to showHealthBar/hideHealthBar. This method will hide the default right side HUD and gets the _healthBar left side area ready to be custom styled.

Parameters:
Name Type Description
backgroundId String

The id for the html div holding your custom hud, assign css to the id to style and positon the background of your custom hud

setupMouseTouchHandle(handleMouseHeldDown)

Sets up everything such that the mousePoint MoverPoint has the cords of where the game is being moved moused over or touched moved. If the handleMouseHeldDown param is true then also mouseIsDown will be available.

Parameters:
Name Type Description
handleMouseHeldDown Boolean

Default is false. If true then mouseIsDown will be set up, then if the game is being touched or clicked mouseIsDown would be 1.

shake(time)

This method shakes the container for the specified time. this method is used in conunction with the _loop method. this method is controlling camera.shake for you, utilizing also the includeShake method. You have more control over what shakes and how it shakes using the BasicCamera's shake methods directly. But this method is the easiest way to simply shake the screen.

Parameters:
Name Type Description
time Number

Amount of time to shake in milliseconds

showCustomHud(health, firstColor, secondColor, height, replacementStyle, additionalStyle)

Shows the custom hud (same as showHealthBar, but in this case it may not be being used as a health bar, it's just that _healthBar is the space used for the custom hud)

Parameters:
Name Type Description
health Number

The amount of health, also the width of the healthbar.

firstColor String

an html color value

secondColor String

am html color value

height Number

the height of the health bar

replacementStyle String

An optional style that would replace the default style, thereby the firstColor and secondColor and height params would not be used. Use this param to style the health bar yourself.

additionalStyle String

A style that would be added to the default style.

showHealthBar(health, firstColor, secondColor, height, replacementStyle, additionalStyle)

Shows and styles the _healthBar. _healthBar is an html div element.

Parameters:
Name Type Description
health Number

The amount of health, also the width of the healthbar.

firstColor String

an html color value

secondColor String

am html color value

height Number

the height of the health bar

replacementStyle String

An optional style that would replace the default style, thereby the firstColor and secondColor and height params would not be used. Use this param to style the health bar yourself.

additionalStyle String

A style that would be added to the default style.

showScoreText(value, topPosition, width, height, additionalStyle)

Shows and styles score text in the _scoreTextDisplay html div element.

Parameters:
Name Type Description
value String
topPosition Number
width Number
height Number
additionalStyle String

showText(text, ttime, tsz, wth, hgt, tp, lft, fontfamilyname, backgroundCss, additionalCss)

Shows html text in a textArea using the given parameters.

For the most versatility, use the pixel font methods to display text.

This showText method exists for quick basic html text showing, to re-style it use the additionalCss param.

Parameters:
Name Type Description
text String
ttime Number

The amount of time in millisecods to show the text, default is 4000

tsz Number

font size default is 16

wth Number

width of the text area default is 44%

hgt Number

height of the text area default is 44%

tp Number

the top html css value default is 0

lft Number

the left html css value default is 0

fontfamilyname String

family name of the font to use

backgroundCss String

Optional css for the background css property of the text area

additionalCss String

any optional additional css for the text area

simpleReset()

Stops the game loop and resets postion, the transition shows, then _loop would start again. And positionResetSpecifics would get called if it is set.

startGameLoop(gameFunc)

starts the main game loop

Parameters:
Name Type Description
gameFunc function

takeDownMouseTouchHandle()

Remove mouse/touch cord capture ability.

textFinished() → {Boolean}

Returns true when text from showText is almost finished being shown.

Returns:
Type
Boolean

textIsShown() → {Boolean}

Returns true if text is shown via showText.

Returns:
Type
Boolean

transitionToSceneByDoor(scene, transitionTime)

Will transition to the scene after a default 1000 milliseconds. To have something happen during transition set the priorToSceneChange / afterSceneChange methods.

Parameters:
Name Type Description
scene Number

The scene number from the TileSceneHolder to transition to.

transitionTime Number

Default is 1000, scene will change after this millisecond delay.

updateAndResetCamera(horizontalOffset, verticalOffset)

Updates and resets the camera with optional offsets.

Parameters:
Name Type Description
horizontalOffset Number
verticalOffset Number

updateEnemyMaps(enemies)

Update each _map property in the Array of MapMovers given to match this.player._map

Parameters:
Name Type Description
enemies Array

An Array of MapMovers

updateSceneryObjectMaps(sceneryObjects)

Update each _map property in the Array of SceneryObject given to match this.player._map

Parameters:
Name Type Description
sceneryObjects Array

An Array of SceneryObjects

useClintBlockFont()

Sets the default pixel font to the built in ClintBlock font. see pixelType

useGoodNeighborsFont()

Sets the default pixel font to the built in GoodNeighbors font. see pixelType

useOldSchoolFont()

Sets the default pixel font to the built in OldSchool font. see pixelType

waitForStart(ts)

This method is used as the alternate loop methoed when gameOver has been called with no lives when start is pressed it will fullResetToTitle

Parameters:
Name Type Description
ts Number