Progress with PWA

After I finished the new web site I have continued working with Preact and my preact template. I created the new web site as a practice in using the tech, the end reason for doing it was not for making a single web site. My final goal is to create PWAs that can then be wrapped in Cordova and Electron to make native builds. Meaning I can do projects with minimal platform specific code! Same code and the project will run in a browser, as a PWA you can install from website (if using Chrome or Safari) to your home screen/desktop, as native android, iOS, Mac, Windows or Linux app.

I had a quick test and wrapped spelmakare.se in Cordova and Electron, both was quite easy to get up and running. The only real issue was loading assets. PWAs prefer absolute paths and Cordova/Electron prefers relative paths, giving me a bit of a headache finding how to instruct cordova/electron properly to load the assets. One fun solution was to simply load everything from spelmakare.se url, this would also make updating future apps a breeze... update the site and voila! you have all your apps updated as well. The security concerns though... ouch.

After doing this I moved on to the more exciting parts. Adding Phaser 3 as a component and wrapping it nicely to use this project as a boiler plate to do games for "all" platforms using only open source software. In addition to Phaser 3, I also decided to give Tiled a go and it has been a very nice experience! Thanks to being able to define properties for layers, tilesets, tiles and objects in the editor you get a very smooth development environment. Ended last week with working on a loader that takes the map file and uses properties to load the needed resources and classes. Combined with preact-cli you have an instant result showing in the browser when making changes to code, level or content.

I've configured phaser to always draw in the whole window, having no specific ratio that it should keep. I wanted to try and do a game that is always fullscreen and never uses black borders. I scale the game and zoom in/out to even out how much of the game world is seen. This so that on a small screen you see more than you would if you only scaled the whole thing, while on larger screens you see less. At 4k resolution you'll see the whole level in the current design. Will test more later, for now this works quite nice and happy enough to move on doing more reusable stuff and then hopefully in a few weeks I can start on some actual game.

Thanks for reading!