Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411283 Posts in 69325 Topics- by 58380 Members - Latest Member: bob1029

March 29, 2024, 06:00:18 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)My own engine inspired by all those game makers out there
Pages: [1]
Print
Author Topic: My own engine inspired by all those game makers out there  (Read 718 times)
Artsicle
Guest
« on: September 09, 2017, 01:11:49 PM »

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)
Code:
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!

Logged
Artsicle
Guest
« Reply #1 on: September 09, 2017, 01:15:14 PM »

The engine doesnt even take up many lines of code, as seen here
Logged
Artsicle
Guest
« Reply #2 on: September 10, 2017, 08:46:29 AM »


Collision tag added to tilemaps!

Code:
instances.map = {
UUID: "469ec721-815a-4571-b008-ff217dd7bbad",
hidden: false,
objectType: "tilemap", //Tilemaps do not need a "type"/"display"
x: 100,
y: 100,
tileSize: 32,
numbers: [
{
number: 0,
type: "color",
display: "green",
collision: false
},
{
number: 1,
type: "image",
display: images[4],
collision: false
},
{
number: 2,
type: "image",
display: images[3],
collision: true
},
{
number: 3,
type: "color",
display: "white",
collision: true
}
],
map: [
[1,1,3,3,3,1,1,1],
[0,1,1,1,1,1,1,2]
],
canvas: game.backgroundCanvas,
context: game.backgroundContext

I think the most dreaded part of doing collision is actually detecting it,
and the hardest part of detecting it is actually getting my head around it.
That's why this is one of my favorite parts of the engine, here's the code I used for detecting collision

Code:
if(instance.objectType === "player") {
for(var j in instances) {
var instance2 = instances[j];
if(instance2.objectType === "wall") {
if(instance.x <= instance2.x+instance2.width+instance.speed && instance.y <= instance2.height+instance2.y && instance.y+instance.height >= instance2.y && instance.x >= instance2.x) {
instance.x+=instance.speed;
}
if(instance.y <= instance2.y+instance2.height+instance.speed && instance.x <= instance2.x+instance2.width && instance.x+instance.width >= instance2.x && instance.y >= instance2.y) {
instance.y+= instance.speed;
}
if(instance.x+instance.width >= instance2.x-instance.speed/0.9 && instance.x <= instance2.x+instance2.width-instance.speed && instance.y + instance.height >= instance2.y && instance.y <= instance2.y + instance2.height) {
instance.x-=instance.speed;
}
if(instance.y+instance.height >= instance2.y-instance.speed && instance.x+instance.width >= instance2.x+instance.speed && instance.y <= instance2.y && instance.x  <= instance2.x + instance2.width) {
instance.y-=instance.speed;
}
}
if(instance2.objectType === "tilemap") {
for(var m in instance2.numbers) {
for(var i in instance2.map) {
for(var l in instance2.map[i]) {
if(instance2.numbers[m].collision === true) {
//log(instance.x + " " + instance.y);
if(instance2.map[i][l] === instance2.numbers[m].number){
var x = instance2.x+instance2.tileSize*l;
var y = instance2.y+instance2.tileSize*i;
var tileSize = instance2.tileSize;
if(instance.x <= x+tileSize+instance.speed && instance.y <= tileSize+y && instance.y+instance.height >= y && instance.x >= x) {
instance.x+=instance.speed;
}
if(instance.y <= y+tileSize+instance.speed && instance.x <= x+tileSize && instance.x+instance.width >= x && instance.y >= y) {
instance.y+= instance.speed;
}
if(instance.x+instance.width >= x-instance.speed/0.9 && instance.x <= x+tileSize-instance.speed && instance.y + instance.height >= y && instance.y <= y + tileSize) {
instance.x-=instance.speed;
}
if(instance.y+instance.height >= y-instance.speed && instance.x+instance.width >= x+instance.speed && instance.y <= y && instance.x <= x + tileSize) {
instance.y-=instance.speed;
}
}
}
}
}
}
}
}
}
If you were to ask me to do this without reference again, it would take me an hour to do it, as the way I do currently is just trial and error.
Logged
Artsicle
Guest
« Reply #3 on: September 10, 2017, 10:59:55 AM »

I could just follow this little AI for...
a minute.

Maybe even less.

Code:
instances.ai = {
UUID: "ce623a91-335f-4d69-a0a6-1b46401d409f",
hidden: false,
type: "color",
display: "red",
objectType: "ai",
x: 40,
y: 40,
width: 5,
height: 5,
canvas: game.mainCanvas,
context: game.mainContext,
aiDelay: 5, //Delay between ai commands being called, has to be biggerthan 1, if it's 1 or less nothing will happen
aiVar: 0, //aiVar is needed since the engine interacts with this. Set it to 0 always
aiDone: false, //aiDone is needed since the engine interacts with this. Set it to false always
collision: true,
aiDo: function() {
d.toggle = !d.toggle;
}, //aiDo is needed since the engine interacts with this. Set it to function(){}
aiCommands: [
{
minChance: 1,
maxChance: 5,
chance: 1, //If the random number between 1 and 5 is 1, then activate the do function. This variable can be any number inbetween your min/max
do: function() {
if(instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").x >= 0 + instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").width/2) {
instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").x-=2;
}

}
},
{
minChance: 1,
maxChance: 5,
chance: 1,
do: function() {
if(instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").y >= 0) {
instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").y -= 2;
}
}
},
{
minChance: 1,
maxChance: 5,
chance: 1,
do: function() {
if(instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").y <= game.mainCanvas.height-instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").height) {
instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").y += 2;
}
}
},
{
minChance: 1,
maxChance: 5,
chance: 1,
do: function() {
if(instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").x <= game.mainCanvas.width-instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").width) {
instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").x += 2;
}
}
},
{
minChance: 1,
maxChance: 5,
chance: 1,
do: function() {
if(instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").x <= game.mainCanvas.width-instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").width && instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").y <= game.mainCanvas.height-instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").height) {
instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").x += 2;
instanceGetter("ce623a91-335f-4d69-a0a6-1b46401d409f").y += 2;
}
}
}
]
};
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic