You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
// WIP: Draw to another canvas then reference that shape
|
|
// takes waay less resource
|
|
// Draw image from 'temp canvas' to "0,0" on primary canvas
|
|
// Will do this to draw each sprite onto the temp canvas, then reference
|
|
// the canvas for 'pixel manipulation' or whatnot, see how it goes
|
|
imageCanvas = document.createElement("canvas"),
|
|
ictx = imageCanvas.getContext("2d");
|
|
|
|
document.getElementById('canvasRule').parentNode.insertBefore(imageCanvas, document.getElementById('canvasRule'));
|
|
|
|
// set the canvas to the size of the image(s) with gap, smaller = better
|
|
sprites = 3;
|
|
|
|
imageCanvas.width = 16*sprites;
|
|
imageCanvas.height = 16;
|
|
|
|
addEnemySprite();
|
|
addAlliedSprite();
|
|
addPlayerSprite();
|
|
|
|
// Doing all the sprites, etc as 16*16 with 0 gap between
|
|
// essentially just a spritesheet on the canvas
|
|
function addEnemySprite(){
|
|
ictx.fillStyle = '#FF0';
|
|
ictx.fillRect(0,0,16,16);
|
|
|
|
ictx.strokeStyle = '#FF00FF';
|
|
ictx.lineWidth = 1;
|
|
ictx.strokeRect(0,0,16,16);
|
|
}
|
|
|
|
function addAlliedSprite(){
|
|
|
|
ictx.fillStyle = '#0EF';
|
|
|
|
ictx.beginPath();
|
|
// awkward cirlce maffs
|
|
ictx.arc(16+(16/2),16/2, 15/2, 0, 2 * Math.PI); // y+(w/2) to align like rect as circle draws from centre
|
|
ictx.fill();
|
|
|
|
ictx.strokeStyle = '#FF00FF';
|
|
ictx.lineWidth = 1;
|
|
ictx.stroke();
|
|
|
|
ictx.closePath();
|
|
}
|
|
|
|
function addPlayerSprite(){
|
|
|
|
ictx.fillStyle = '#5ce65c';
|
|
|
|
ictx.beginPath();
|
|
// awkward cirlce maffs
|
|
ictx.arc(32+(16/2),16/2, 15/2, 0, 2 * Math.PI); // y+(w/2) to align like rect as circle draws from centre
|
|
ictx.fill();
|
|
|
|
ictx.strokeStyle = '#FF00FF';
|
|
ictx.lineWidth = 1;
|
|
ictx.stroke();
|
|
|
|
ictx.closePath();
|
|
}
|