Skip to content

Commit ccc48ce

Browse files
luizbillsluizbills
committed
update engine
1 parent ca3d555 commit ccc48ce

File tree

5 files changed

+61
-55
lines changed

5 files changed

+61
-55
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"author": "Luiz Bills",
1818
"license": "MIT",
1919
"devDependencies": {
20-
"esbuild": "^0.25.0"
20+
"esbuild": "^0.25.1"
2121
},
2222
"dependencies": {
2323
"@codemirror/lang-javascript": "^6.2.3",

‎public/about.html

+3-7
Original file line numberDiff line numberDiff line change
@@ -272,8 +272,7 @@ <h2>Basic boilerplate</h2>
272272
}
273273

274274
function resized() {
275-
// called when the browser was resized
276-
// also called once before init()
275+
// called when the canvas is resized
277276
}
278277

279278
function tap(x, y, tapId) {
@@ -334,11 +333,8 @@ <h2><a id="settings">Game Configuration</a></h2>
334333
// the canvas (by default a new canvas is created)
335334
settings.canvas = null
336335

337-
// make the game screen fill the entire screen
338-
settings.fullscreen = true
339-
340336
// the game screen size
341-
// by default, the game fills the entire screen
337+
// by default, the game fills the entire webpage
342338
settings.width = null
343339
settings.height = settings.width || null
344340

@@ -677,7 +673,7 @@ <h2><a id="engine-api">Engine API</a></h2>
677673
emit(event: string, arg1?, arg2?, arg3?, arg4?): void
678674

679675
// Resizes the game canvas.
680-
// Also, emits the "resized" (use `listen` to observe this event).
676+
// Also, emits the "resized" event.
681677
resize(width: number, height: number): void
682678

683679
// Sets the scale of the game's delta time (dt).

‎public/litecanvas.js

+55-46
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
() => elem.removeEventListener(evt, callback, false)
3232
);
3333
}, isFinite = Number.isFinite, defaults = {
34-
fullscreen: true,
3534
width: null,
3635
height: null,
3736
autoscale: true,
@@ -46,7 +45,7 @@
4645
animate: true
4746
};
4847
settings = Object.assign(defaults, settings);
49-
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _deltaTime, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
48+
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _deltaTime, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
5049
init: null,
5150
update: null,
5251
draw: null,
@@ -889,9 +888,11 @@
889888
"string" === typeof eventName,
890889
"emit: 1st param must be a string"
891890
);
892-
triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
893-
triggerEvent(eventName, arg1, arg2, arg3, arg4);
894-
triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
891+
if (_initialized) {
892+
triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
893+
triggerEvent(eventName, arg1, arg2, arg3, arg4);
894+
triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
895+
}
895896
},
896897
/**
897898
* Get a color by index
@@ -932,11 +933,19 @@
932933
* @param {number} height
933934
*/
934935
resize(width, height) {
935-
DEV: assert(isFinite(width), "resize: 1st param must be a number");
936-
DEV: assert(isFinite(height), "resize: 2nd param must be a number");
936+
DEV: assert(
937+
isFinite(width) && width > 0,
938+
"resize: 1st param must be a number"
939+
);
940+
DEV: assert(
941+
isFinite(height) && height > 0,
942+
"resize: 2nd param must be a number"
943+
);
937944
instance.setvar("WIDTH", _canvas.width = width);
938945
instance.setvar("HEIGHT", _canvas.height = height);
939-
pageResized();
946+
instance.setvar("CENTERX", instance.WIDTH / 2);
947+
instance.setvar("CENTERY", instance.HEIGHT / 2);
948+
onResize();
940949
},
941950
/**
942951
* The scale of the game's delta time (dt).
@@ -994,10 +1003,9 @@
9941003
for (const [callback, config] of _plugins) {
9951004
loadPlugin(callback, config);
9961005
}
997-
if (_fullscreen || _autoscale) {
998-
on(root, "resize", pageResized);
1006+
if (_autoscale) {
1007+
on(root, "resize", onResize);
9991008
}
1000-
pageResized();
10011009
if (settings.tapEvents) {
10021010
const _getXY = (pageX, pageY) => [
10031011
(pageX - _canvas.offsetLeft) / _scale,
@@ -1134,21 +1142,23 @@
11341142
}
11351143
let updated = 0, frameTime = (now - _lastFrameTime) / 1e3;
11361144
_lastFrameTime = now;
1137-
if (frameTime > _deltaTime * 30)
1138-
return console.log("skipping too long frame");
1139-
_accumulated += frameTime;
1140-
if (!_animated) {
1141-
_accumulated = _deltaTime;
1142-
}
1143-
for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
1144-
instance.emit("update", _deltaTime * _timeScale);
1145-
instance.setvar(
1146-
"ELAPSED",
1147-
instance.ELAPSED + _deltaTime * _timeScale
1148-
);
1149-
updated++;
1145+
if (frameTime > _deltaTime * 30) {
1146+
console.log("skipping too long frame");
1147+
} else {
1148+
_accumulated += frameTime;
1149+
if (!_animated) {
1150+
_accumulated = _deltaTime;
1151+
}
1152+
for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
1153+
instance.emit("update", _deltaTime * _timeScale);
1154+
instance.setvar(
1155+
"ELAPSED",
1156+
instance.ELAPSED + _deltaTime * _timeScale
1157+
);
1158+
updated++;
1159+
}
11501160
}
1151-
if (updated) {
1161+
if (updated || !_animated) {
11521162
instance.textalign("start", "top");
11531163
instance.emit("draw");
11541164
}
@@ -1160,44 +1170,43 @@
11601170
"Invalid canvas element"
11611171
);
11621172
DEV: assert(
1163-
null === instance.WIDTH || instance.WIDTH > 0,
1173+
null == instance.WIDTH || instance.WIDTH > 0,
11641174
`Litecanvas' "width" option should be null or a positive number`
11651175
);
11661176
DEV: assert(
1167-
null === instance.HEIGHT || instance.HEIGHT > 0,
1177+
null == instance.HEIGHT || instance.HEIGHT > 0,
11681178
`Litecanvas' "width" option should be null or a positive number`
11691179
);
1180+
DEV: assert(
1181+
null == instance.HEIGHT || instance.WIDTH > 0 && instance.HEIGHT > 0,
1182+
`Litecanvas' "width" is required when "heigth" is passed`
1183+
);
11701184
instance.setvar("CANVAS", _canvas);
11711185
_ctx = _canvas.getContext("2d");
11721186
on(_canvas, "click", () => root.focus());
1173-
if (instance.WIDTH > 0) {
1174-
_fullscreen = false;
1175-
}
11761187
_canvas.style = "";
1177-
_canvas.width = instance.WIDTH;
1178-
_canvas.height = instance.HEIGHT || instance.WIDTH;
1188+
if (!instance.WIDTH) {
1189+
instance.WIDTH = root.innerWidth;
1190+
instance.HEIGHT = root.innerHeight;
1191+
}
1192+
instance.resize(instance.WIDTH, instance.HEIGHT, false);
11791193
if (!_canvas.parentNode) document.body.appendChild(_canvas);
11801194
}
1181-
function pageResized() {
1182-
const pageWidth = root.innerWidth, pageHeight = root.innerHeight, styles = _canvas.style;
1183-
styles.display = "block";
1184-
if (_fullscreen) {
1185-
styles.position = "absolute";
1186-
styles.inset = 0;
1187-
instance.setvar("WIDTH", _canvas.width = pageWidth);
1188-
instance.setvar("HEIGHT", _canvas.height = pageHeight);
1189-
} else if (_autoscale) {
1190-
styles.margin = "auto";
1195+
function onResize() {
1196+
const styles = _canvas.style;
1197+
if (_autoscale) {
1198+
if (!styles.display) {
1199+
styles.display = "block";
1200+
styles.margin = "auto";
1201+
}
11911202
_scale = Math.min(
1192-
pageWidth / instance.WIDTH,
1193-
pageHeight / instance.HEIGHT
1203+
root.innerWidth / instance.WIDTH,
1204+
root.innerHeight / instance.HEIGHT
11941205
);
11951206
_scale = (settings.pixelart ? ~~_scale : _scale) || 1;
11961207
styles.width = instance.WIDTH * _scale + "px";
11971208
styles.height = instance.HEIGHT * _scale + "px";
11981209
}
1199-
instance.setvar("CENTERX", instance.WIDTH / 2);
1200-
instance.setvar("CENTERY", instance.HEIGHT / 2);
12011210
if (!settings.antialias || settings.pixelart) {
12021211
_ctx.imageSmoothingEnabled = false;
12031212
styles.imageRendering = "pixelated";

‎public/preview.html

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
}
4848

4949
canvas {
50+
display: block;
5051
background-image: repeating-conic-gradient(#fefefe 0% 25%, #ddd 0% 50%);
5152
background-position: 0 0, 0px 0px;
5253
background-size: 64px 64px;

‎public/sw.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const cacheName = "luizbills.litecanvas-editor-v1";
2-
const version = "2.73.0";
2+
const version = "2.74.0";
33

44
const precacheResources = [
55
"/",

0 commit comments

Comments
 (0)