Rudrabhoj Bhati

1. Find the golden ratio (ideal height / window.innerHeight) (Or width, see 2nd point) 2. Resize the game in a way you either use entire height. To do that, divide your ideal height by golden ratio, then divide your ideal width with the golden ratio. (or do the opposite, if it doesn't fit like that. You can know this if width you get is larger than window.innerWidth) 3. Now, use your golden ratio to reinterpret where you would place your objects. x = 20 in a 1280x720 game becomes 10 in a 640x360 game. You get the golden ratio of 2 (720/360). 20 /2 = 10. 4. You have to use the golden ratio to reinterpret the scale too. In the above example, you would divide whatever scale you have by 2. Tips: 1. Abstract away the phaser sprite as a component of your new Sprite type. 2. Use getters and setters when you send and receive values for the x and y properties of the sprite component. When you get them, divide it by the golden ratio and then change it in the sprite component. When you are asked for them, multiply from the value in the sprite component and send. Do save the original values privately. 3. Do the same for the scale. 4. Every resize updates everything. 5. Ensure that you don't deal with actual values directly, you have to always deal with assuming x = 20 (not 10), actual values should only work internally. 6. See the example of how to handle different values internally, and sending different values through getters. get x() { let gRatio = this._getGoldenRatio(); return this._sprite.x * gRatio; } get y() { let gRatio = this._getGoldenRatio(); return this._sprite.y * gRatio; } set x(xVal) { let gRatio = this._getGoldenRatio(); this._sprite.x = xVal / gRatio; } set y(yVal) { let gRatio = this._getGoldenRatio(); this._sprite.y = yVal / gRatio; } EDIT: Make sure to store golden ratios internally too, and when the global ratio changes (because of a resize) update everything. By x and y getters you would get ideal values, divide it by new golden ratio. Update values on the sprite component and then update the stored golden ratio.

Why would you need pixel perfect collision on something like a space shooter?

Phaser is okay for large games. Problem lies in the architecture of the games. You have to properly manage the resources. Plan downloads and rendering properly. Draw what is required, download what is required, in a planned manner. A poorly constructed game would be overkill on any platform. Phaser and JS just require us to be extra careful with the performance. Understand what performs well and what doesn't.

1. If you just want to convert the old stuff, and do not want to develop new HTML5 'elearning material', then by all means use OpenFL. 2. If you want to not only convert the old stuff, but also want to develop new HTML elearning material in future, use Phaser.

Give a try to Haxe/OpenFL, if you want a language something similar to JavaScript, but ability to export native iOS and Android games. OpenFL also support HTML5 export. If you find OpenFL too low level, try HaxeFlixel.

I personally use ES6 with Grunt for both Phaser and PIXI.

Why would you want to load images there? You need a separate Load state. That will solve the problem.

I think this might be helpful

I have emailed, did you get my email (agnis.tech[at]gmail.com)?

Hello, Very interesting project. I can do this in 1 week or less. This is my lastgame, Icy Babel: CLICK TO PLAY You can contact me here on the threat, personal message at forum, or at skype and/or email. My skype is: sanatan_tech My email is: [email protected] Regards, Rudra

My next game is being created at 1280x740 too hehe. I haven't tested phaser's scaling down a lot, hope it'll work.

Hello Jawhar, Email sent. I am available immediately. Regards, Harshvardhan

Really fun

Email sent for my game Icy Babel