So awhile back I made this (
https://forums.tigsource.com/index.php?topic=61897.0 )
And since I love json so much, I made an engine!
Here is my stuff so far (Planning on adding collision tag for the numbers array in tilemaps)
function loaded() {
'use strict';
var instances = [];
var requiredImages = 0;
var doneImages = 0;
var images = [];
var game = [];
var d = [];
d.toggle = false;
game.backgroundCanvas = document.getElementById("backgroundCanvas");
game.mainCanvas = document.getElementById("mainCanvas");
game.guiCanvas = document.getElementById("guiCanvas");
game.mainContext = game.mainCanvas.getContext("2d");
game.backgroundContext = game.backgroundCanvas.getContext("2d");
instances.player = {};
instances.wall = {};
instances.map = {};
function init() {
loop();
instances.wall = {
UUID: "909ffc85-fdb6-47a7-92ef-917ecc5745d8",
hidden: false,
type: "image",
display: images[2],
objectType: "wall",
x: 64,
y: 64,
width: 64,
height: 64,
canvas: game.mainCanvas,
context: game.mainContext
};
instances.map = {
UUID: "469ec721-815a-4571-b008-ff217dd7bbad",
hidden: false,
objectType: "tilemap", //Tilemaps do not need a "type"/"display"
x: 0,
y: 0,
tileSize: 32,
numbers: [
{
number: 0,
type: "color",
display: "green"
},
{
number: 1,
type: "image",
display: images[4]
},
{
number: 2,
type: "image",
display: images[3]
}
],
map: [
[1,0,0,1,0,0,1,1],
[0,0,0,1,0,0,0,2]
],
canvas: game.backgroundCanvas,
context: game.backgroundContext
};
instances.player = {
hidden: false, //true/false
type: "color", //color/image
display: "red", //color(red,green,yellow,etc)/imagevariable
objectType:"player", //Needed for collision
collision: true, //Have the player collide with object types that are "wall", or "custom" with the "wall" property
canvas: game.mainCanvas, //canvas var
context: game.mainContext, //context var
movement:true, //can move or not with arrowspressed/wasd pressed
x: 0, //starting x
y: 10, //starting y
width: 32, //starting width
height: 32, //starting height
UUID: "26aafe25-fb0d-49f1-a288-571b159e9a39", //uuid, get one from https://www.uuidgenerator.net and put your random one there
arrows: true, //move from arrows?
arrowsPressed: { //yes
left: "goLeft", //goLeft/goUp/goRight/goDown
up: "goUp", //goLeft/goUp/goRight/goDown
right:"goRight", //goLeft/goUp/goRight/goDown
down:"goDown" //goLeft/goUp/goRight/goDown
},
customKeys: [
{
keyCode: 73, //Key: I
time:"multi", //On press get fired multiple times (Use for movement)
action: function() { //Gets called when key is pressed
instanceGetter("26aafe25-fb0d-49f1-a288-571b159e9a39").x-=2;
instanceGetter("26aafe25-fb0d-49f1-a288-571b159e9a39").y-=2;
}
},
{
keyCode: 66, //Key: B
time: "single", //multi/single
key: "keyup", //keyup/keydown, if down then single will repeat multiple times when held down forawhile, if up then its one time on key up. Only affects you if time = single, multi doesnt matter
action: function() {
if(d.toggle) { //D.toggle is my custom var, not part of the engine
instanceGetter("26aafe25-fb0d-49f1-a288-571b159e9a39").type="color";
instanceGetter("26aafe25-fb0d-49f1-a288-571b159e9a39").display="orange";
d.toggle = false;
} else {
d.toggle = true;
instanceGetter("26aafe25-fb0d-49f1-a288-571b159e9a39").type="image";
instanceGetter("26aafe25-fb0d-49f1-a288-571b159e9a39").display=images[4];
}
}
}
],
speed: 4,
loops: [
//Name these functions whatever you want, they'll be called nomatter what, as long as the "instanceLogic(instance)" statement is being called in a loop.
function update58912() {
}
]
};
newInstance(instances.player);
//newInstance(instances.wall);
newInstance(instances.map);
}
function loop() {
window.requestAnimFrame(function() {
loop();
});
update();
render();
}
function update() {
autoClearConsole(1000); //100 = 1 Second
autoRefresh(20000); //100 = 1 Second
instanceLogic(instances.player);
//instanceLogic(instances.wall);
instanceLogic(instances.map);
}
function render() {
clearCanvas(game.backgroundCanvas);
clearCanvas(game.mainCanvas);
clearCanvas(game.guiCanvas);
drawInstance(instances.player);
//drawInstance(instances.wall);
drawInstance(instances.map);
}
function initImages(paths) {
requiredImages = paths.length;
for(var i in paths) {
var img = new Image();
img.src = paths[i];
images[i] = img;
images[i].onload = function() {
doneImages++;
if(doneImages >= requiredImages) {
init();
}
};
}
}
initImages(["crate.png", "crate2.png", "gradient.png","devtexture.png","devtexture2.png","devtexture3.png","devtexture4.png"]);
}
loaded();
And here is a picture of the code in action!