Skip to content

wip merge pseudo-3d effect from broken-sign-games #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

wip merge pseudo-3d effect from broken-sign-games #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions src/js/compiler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function generateSpriteMatrix(dat) {
var result = [];
for (var i = 0; i < dat.length; i++) {
var row = [];
for (var j = 0; j < dat.length; j++) {
for (var j = 0; j < dat[i].length; j++) {
var ch = dat[i].charAt(j);
if (ch == '.') {
row.push(-1);
Expand Down Expand Up @@ -180,14 +180,10 @@ function generateExtraMembers(state) {
o.spritematrix[i] = zeros;
}
} else {
if ( o.spritematrix.length!==state.sprite_size) {
logWarning("Sprite graphics must be " + state.sprite_size + " wide and " + state.sprite_size + " high exactly.",o.lineNumber);
} else {
for(var i = 0; i < state.sprite_size; i++) {
if(o.spritematrix[i].length!==state.sprite_size) {
logWarning("Sprite graphics must be " + state.sprite_size + " wide and " + state.sprite_size + " high exactly.",o.lineNumber);
break;
}
for(var i = 0; i < state.sprite_size; i++) {
if(o.spritematrix[i].length!==state.sprite_size) {
logWarning("Sprite graphics must be " + state.sprite_size + " wide.",o.lineNumber);
break;
}
}
o.spritematrix = generateSpriteMatrix(o.spritematrix);
Expand Down
112 changes: 66 additions & 46 deletions src/js/graphics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,39 @@
function createSprite(name,spritegrid, colors, padding) {
function createSprite(name,spritegrid, colors, padding, override_cellwidth, override_cellheight) {
if (colors === undefined) {
colors = [state.bgcolor, state.fgcolor];
}

var sprite = makeSpriteCanvas(name);
var spritectx = sprite.getContext('2d');

renderSprite(spritectx, spritegrid, colors, padding, 0, 0);
if (override_cellheight !== undefined) {
sprite.height=override_cellheight
}
renderSprite(spritectx, spritegrid, colors, padding, 0, 0, override_cellwidth, override_cellheight);

return sprite;
}

function renderSprite(spritectx, spritegrid, colors, padding, x, y) {
// render a sprite (spritegrid, colors) to a drawing context (spritectx,padding,x,y)
// the image will be scaled up based on cellwidth and cellheight
function renderSprite(spritectx, spritegrid, colors, padding, x, y, override_cellwidth, override_cellheight) {
if (colors === undefined) {
colors = ['#00000000', state.fgcolor];
}

var offsetX = x * cellwidth;
var offsetY = y * cellheight;
override_cellheight=override_cellheight || cellheight
override_cellwidth=override_cellwidth || cellwidth

var offsetX = x * override_cellwidth;
var offsetY = y * override_cellheight;

spritectx.clearRect(offsetX, offsetY, cellwidth, cellheight);
spritectx.clearRect(offsetX, offsetY, override_cellwidth, override_cellheight);

var w = spritegrid[0].length;
var h = spritegrid.length;
var cw = ~~(cellwidth / (w + (padding|0)));
var ch = ~~(cellheight / (h + (padding|0)));
var cw = ~~(override_cellwidth / (w + (padding|0)));
var ch = ~~(override_cellheight / (h + (padding|0)));

var pixh=ch;
if ("scanline" in state.metadata) {
pixh=Math.ceil(ch/2);
Expand Down Expand Up @@ -120,13 +129,41 @@ function regenSpriteImages() {
continue;
}

if (canOpenEditor) {
spriteimages[i] = createSprite(i.toString(),sprites[i].dat, sprites[i].colors);
if (sprites[i].dat.length === state.sprite_size) {
// normal sprite
if (canOpenEditor) {
spriteimages[i] = createSprite(i.toString(),sprites[i].dat, sprites[i].colors);
}

var spriteX = (i % spritesheetSize)|0;
var spriteY = (i / spritesheetSize)|0;
renderSprite(spritesheetContext, sprites[i].dat, sprites[i].colors, 0, spriteX, spriteY);
sprites[i].canvas=spritesheetCanvas
sprites[i].sx=spriteX * cellwidth
sprites[i].sy=spriteY * cellheight
sprites[i].sw=cellwidth
sprites[i].sh=cellheight
sprites[i].oy=0
// console.log("normal",i)
} else {
// tall sprite

var name=i.toString()
var tallheight = cellheight * sprites[i].dat.length / state.sprite_size

// the only place the overide params are used:
var canv=createSprite(name,sprites[i].dat, sprites[i].colors,0,cellwidth,tallheight);
// assert(precanv==canv)
spriteimages[i] = canv
sprites[i].canvas=canv
sprites[i].sx=0
sprites[i].sy=0
sprites[i].sw=cellwidth
sprites[i].sh=tallheight
sprites[i].oy=cellheight - canv.height
// console.log("tall",name,canv.width,canv.height);
Copy link
Author

@pancelor pancelor Feb 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the meat of the change - the sprites are packed into a fixed-size spritesheet, but we want to make variably-sized sprites. so, just create a new entire spritesheet for each one. and then for all sprites, track which spritesheet they come from (using the sprites table)

}

var spriteX = (i % spritesheetSize)|0;
var spriteY = (i / spritesheetSize)|0;
renderSprite(spritesheetContext, sprites[i].dat, sprites[i].colors, 0, spriteX, spriteY);
// console.log(" ",sprites[i].sx,sprites[i].sy,sprites[i].sw,sprites[i].sh,sprites[i].oy)
}

if (canOpenEditor) {
Expand All @@ -147,16 +184,12 @@ var editorGlyphMovements=[];

var canvasdict={};
function makeSpriteCanvas(name) {
var canvas;
if (name in canvasdict) {
canvas = canvasdict[name];
} else {
canvas = document.createElement('canvas');
canvasdict[name]=canvas;
if (!(name in canvasdict)) {
canvasdict[name]=document.createElement('canvas');
canvasdict[name].width = cellwidth;
Copy link
Author

@pancelor pancelor Feb 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the important bit here is that the canvas only gets resized on creation, not every time we get it

canvasdict[name].height = cellheight;
}
canvas.width = cellwidth;
canvas.height = cellheight;
return canvas;
return canvasdict[name];
}


Expand Down Expand Up @@ -495,16 +528,14 @@ function redraw() {
for (var k = 0; k < state.objectCount; k++) {

if (posMask.get(k) != 0) {
var spriteX = (k % spritesheetSize)|0;
var spriteY = (k / spritesheetSize)|0;

var x = xoffset + (i-mini-cameraOffset.x) * cellwidth;
var y = yoffset + (j-minj-cameraOffset.y) * cellheight;

var sprite = sprites[k];
ctx.drawImage(
spritesheetCanvas,
spriteX * cellwidth, spriteY * cellheight, cellwidth, cellheight,
Math.floor(x), Math.floor(y), cellwidth, cellheight);
sprite.canvas,
sprite.sx,sprite.sy,sprite.sw,sprite.sh,
Math.floor(x), Math.floor(y)+sprite.oy, sprite.sw,sprite.sh);
}
}
}
Expand Down Expand Up @@ -546,12 +577,6 @@ function redraw() {
var posMask = curlevel.getCellInto(posIndex,_o12);

if (posMask.get(k) != 0) {
var spriteX = (k % spritesheetSize)|0;
var spriteY = (k / spritesheetSize)|0;


//console.log(posIndex + " " + layerID);

var x = xoffset + (i-mini-cameraOffset.x) * cellwidth;
var y = yoffset + (j-minj-cameraOffset.y) * cellheight;

Expand All @@ -567,11 +592,11 @@ function redraw() {
ctx.globalAlpha = 1-tween;
}
}

var sprite = sprites[k];
ctx.drawImage(
spritesheetCanvas,
spriteX * cellwidth, spriteY * cellheight, cellwidth, cellheight,
Math.floor(x), Math.floor(y), cellwidth, cellheight);
sprite.canvas,
sprite.sx,sprite.sy,sprite.sw,sprite.sh,
Math.floor(x), Math.floor(y)+sprite.oy, sprite.sw,sprite.sh);
ctx.globalAlpha = 1;
}
}
Expand Down Expand Up @@ -839,13 +864,8 @@ function canvasResize() {
cellwidth = canvas.width / screenwidth;
cellheight = canvas.height / screenheight;

var w = 5;
var h = 5;

if (sprites.length >= 2) {
var w = sprites[1].dat.length;
var h = sprites[1].dat.length;//sprites[1].dat[0].length;
}
var w = state.sprite_size || 5;
var h = state.sprite_size || 5;

if (textMode) {
w=5 + 1;
Expand Down
12 changes: 2 additions & 10 deletions src/js/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,12 +331,7 @@ var codeMirrorFn = function() {
return nstate;
},
blankLine: function(state) {
if (state.section === 'levels') {
if (state.levels[state.levels.length - 1].length > 0)
{
state.levels.push([]);
}
}
blankLineHandle(state)
},
token: function(stream, state) {
var mixedCase = stream.string;
Expand Down Expand Up @@ -666,14 +661,11 @@ var codeMirrorFn = function() {

spritematrix[spritematrix.length - 1] += ch;
if (spritematrix[spritematrix.length-1].length>state.sprite_size){
logError('Sprites must be ' + state.sprite_size + ' wide and ' + state.sprite_size + ' high.', state.lineNumber);
logError('Sprites must be ' + state.sprite_size + ' wide.', state.lineNumber);
stream.match(reg_notcommentstart, true);
return null;
}
o.spritematrix = state.objects_spritematrix;
if (spritematrix.length === state.sprite_size && spritematrix[spritematrix.length - 1].length == state.sprite_size) {
state.objects_section = 0;
}

if (ch!=='.') {
var n = parseInt(ch);
Expand Down