SimpleIsoScene

SimpleIsoScene

Used to display a basic isometric scene.

See the isometric exmaple here: https://www.tabageos.com/examples/isometricExample

You just construct it and then call .render in a loop. The SimpleIsoCharacter Class move method returns true when it actually moves,
  so you only need to call render when any SimpleIsoCharacter actually moves or when the scene changes.

 All of the propertiesd and methods are used during the .render method, it encapsulates everything to render the scene.
  But if you really want to tackle it, everything is also pieced out in different methods and properties.

Constructor

new SimpleIsoScene(tileWidth, tileHeight, floorCO, canvasObject, player, map, tileSheetImg, playerValue, noPassValue, floorValues, xOffset, yOffset, spread, xSpreadShifter, ySpreadShifter, camera)

Parameters:
Name Type Description
tileWidth Number

The width of each tile.

tileHeight Number

The height of each tile.

floorCO CanvasObject

The bottom most CanvsObject, the floor will be rendered on it.

canvasObject CanvasObject

The CanvasObject that is displayed on top of floorCo, characters will be rendered on it

player SimpleIsoCharacter

The SimpleIsoCharacter that will be moved around by the player.

map Array

A 2D Array defining the tiles to be drawn, the inner values should be [y,x] arrays denoting the y and x index of where in the sprite sheet to draw from. Set this map up as if your looking at standard top down 2d, the class converts to iso for you.

tileSheetImg Image

The Image to use as the tile set, the tile set to draw from.

playerValue Array

The [y,x] value of the first frame of the first animation defined for the player

noPassValue Array

Array of [y,x,y,x,y,x...] pairs denoting [y,x] values in map that are not passable.

floorValues Array

Array of [y,x,y,x,y,x...] pairs denoting [y,x] values in map that are the floor tiles.

xOffset Number

optional amount to horizontally offset whole scene

yOffset Number

optional amount to vertically offset whole scene

spread Number

A number normally between .009 and 1, default is .009, play with it until your scene looks how you want.

xSpreadShifter Number

A number that shifts the x position of each tile as a scene, default is 0.00. Sometimes this number may need to be .10 or such, it is another value to play with, also if your tiles are not exact values (like 32x16 instead of 32x32) then you may need to mess with this value.

ySpreadShifter Number

A number that shifts the y position of each tile as a scene, default is 0.00. Sometimes this number may need to be .10 or such, it is another value to play with, also if your tiles are not exact values (like 32x16 instead of 32x32) then you may need to mess with this value.

camera BasicCamera

A BasicCamera to use.

Members

_blittOnce

_cam

_canvas

_effRect1

_effRect2

_floor

_focusPoint

_focusTile

_helperPoint

_img

_map

_mp

_overDraws

_player

_rect

_rect2

_secondDraws

_spread

_theight

_twidth

_upperTileOffset

_xSpreadShifter

_yIndex

_ySpreadShifter

constructor

floorValues

movingBoxes

noPassValue

playerTileValue

sceneXOffset

sceneYOffset

Methods

checkTileValueAt(x, y, patt, tileWidth, tileHeight, indexHolderPoint) → {Object}

Returns the tile value in the patt. This is the same as BlitMath.checkTileValueAt

Parameters:
Name Type Description
x Number
y Number
patt Array
tileWidth Number
tileHeight Number
indexHolderPoint MoverPoint
Returns:
Type
Object

draw(subject, source, value, tw, th, tx, ty, renderXOffset, renderYOffset, renderSpread)

Draws a tile from a tilesheet into the scene using BlitMath notation; [y,x] value denote the y and x index in the tilesheet to draw from. tw and th are the tile width and height, the y x index from value is multiplied by tw or th to get the position to draw from. tx and ty are the 2d point to draw to, pass in the 2d grid based point, this method translates to iso for you, ._spread, ._xSpreadShifter and ._ySpreadShifter can be used to make specific graphical adjustemnts, play with values from 0.9 to +/-0.000009 to get it looking exactly right for your graphics. (whole numbers are too much)

renderXOffset and renderYOffset offset the whole scene on the subject

This method is used inside of the specificPatternBlit method which is used inside of the render method.

Parameters:
Name Type Description
subject CanvasObject
source Image
value Array

This method is expecting [y,x] values.

tw Number
th Number
tx Number
ty Number
renderXOffset Number
renderYOffset Number
renderSpread Number

rectUpdate(destX, destY, tw, th)

Used inside of the render method. Updates destination Rectangles. _rect and _rect2

Parameters:
Name Type Description
destX Number
destY Number
tw Number
th Number

render(clearWidth, clearHeight)

Encapsulates all calls to render the scene, just instantiate the class with desired settings, and call render during a loop.

Parameters:
Name Type Description
clearWidth Number
clearHeight Number

specificPatternBlit(subject, source, pattern, tw, th, renderXOffset, renderYOffset, renderSpread)

Using a 2D Array of [y,x] based index values, draws an iso scene using a tilesheet.

It's actually not simple... you can use this method along with the others, or you can just call render().

This is called specificPatternBlit because it expects the specific [y,x] style of inner values in the pattern.

Parameters:
Name Type Description
subject CanvasObject

CanvasObject to draw to.

source Image

Source Image to draw from

pattern Array

Must be a 2D Array of [y,x] values, denoting the y and x index (not exact location) of each tile.

tw Number

Tile width

th Number

Tile height

renderXOffset Number

It's better to use the _xSpreadShifter _ySpreadShifter and sceneXOffset sceneYOffset properties during construction, and then just call render.

renderYOffset Number

When these values are not set, _xSpreadShifter _ySpreadShifter sceneXOffset sceneYOffset properties of this Class are what is being used in this method.

renderSpread Number

updateTileCoordinates(x, y, tw, th, fp)

Updates _focusTile and _focusPoint

Parameters:
Name Type Description
x Number

The x index of the focus tile

y Number

The y index of the focus tile

tw Number

The tile width

th Number

The tile height

fp MoverPoint

If passed then _focusPoint will be this point instead of from the focus tile.