phoboslab / Ejecta

A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS
2.81k stars 322 forks source link

Legacy ImpactJS #675

Open gotnull opened 4 years ago

gotnull commented 4 years ago

I have a legacy iOS game written in ImpactJS. I'd like to use the latest version of Ejecta although I'm unable to find what I need to replace when it comes to using ejecta.require:

I used to use the following:

// Enable crisp nearest-neighbor scaling instead
// of the default bilinear scaling.
canvas.imageSmoothingEnabled = false;

ejecta.require('lib/impact/impact.js');
ejecta.require('lib/game/main.js');

Although I receive the following error:

TypeError: ejecta.require is not a function. (In 'ejecta.require('lib/impact/impact.js')', 'ejecta.require' is undefined) at line 5 in index.js

What's the recommended way to include the lib/impact and lib/game folders?

And also what should I use instead of:

canvas.imageSmoothingEnabled = false;

phoboslab commented 4 years ago

ejecta.require() has been renamed to ejecta.include() as to not be confused with the CommonJS Style require(). So just use:

ejecta.include('lib/impact/impact.js');
ejecta.include('lib/game/main.js');

imageSmoothingEnabled is a property on the Canvas Context, not on the Canvas itself. So in your Impact Game's init(), you should be able to set it via

ig.system.context.imageSmoothingEnabled = false;

It's been quite a while since I've done anything with Impact/Ejecta, so I hope this is all correct. The docs at https://impactjs.com/ejecta should still be up-to-date, though.

Edit: totally forgot, Impact has some built-in stuff for crisp scaling. See here https://impactjs.com/ejecta/integrating-impact-games#screen-size

gotnull commented 4 years ago

Okay, that all seemed to work and the loading bar appeared although it reaches about 98% and just stops without showing any console errors.

Originally I thought it might be an issue loading sounds but I set ig.Sound.enabled = false and it still sits at 98%.

phoboslab commented 4 years ago

Difficult to say what's causing this without the source. You could try to log all unloaded files by adding

console.log(this._unloaded)

in the loaders draw() method here https://github.com/phoboslab/Impact/blob/master/lib/impact/loader.js#L65 - or in the respective loader class if your game is not using the default. See which resources remain at the end.

gotnull commented 4 years ago

I'll keep at it. Thanks for the unloaded file checking.

If I did want to send you the source at some point where would I send it?

phoboslab commented 4 years ago

Please don't unless you want to pay me :)

I'm happy to answer your questions here publicly, to the benefit of other people having the same problems. So in this case, maybe post the list of assets your game tries to load.

gotnull commented 4 years ago

No problem. I'll let you know thanks. :)

gotnull commented 4 years ago

I managed to get the game loading with the help of console.log(this._unloaded);.

I've got another question now that there's all different types of iOS resolutions. What do you recommend for being able to support all device dimensions considering the following:

ig.main("#canvas", MyGame, 60, ??, ??, ??);

phoboslab commented 4 years ago

Make the canvas as big as the device's screen. There's lots of different ways to do this; what the "right" way is entirely depends on your game.

A simple solution is to chose a fixed screen height and variable width to get the same aspect ratio as the device screen, then scale it up to 100%. Example here: https://impactjs.com/ejecta/integrating-impact-games#screen-size

Note that this may result in a non-integer scaled canvas (e.g. 1.5 scale) which could lead to scaling artifacts. So, you could enforce scaling by an integer and then resize the width and height of your game screen.

Or you ignore all that, take the game's original aspect ratio and scale it up as big as you can to still fit on the device screen. Of course you'll have some black bars, but that might still be appropriate for your game.