JS13kGames Jam with Web Maker
Hola Developer!
If you are reading this post, you probably know about Js13kGames compo and will most likely be participating in the game jam this year. If yes, I have some amazing news for you! Even if not, keep reading and you might find something really cool to do this August!
This year’s Js13kGames compo features a collaboration between my app, Web Maker and of course, the super-duper Js13kGames competition by Andrzej. If you are not familiar of any of those two, Web Maker is a frontend playground that works offline too. And Js13kGames is an HTML5 game compo that runs for a month starting 13th August in which you need to develop a game under 13KB! Let me walk you through what this collaboration actually has in store for you.
Web Maker’s new Js13kGames mode! 🔥🎮
Introducing the new Js13kGames mode in Web Maker. This mode converts Web Maker into an all-you-need environment to develop your Js13kGames compo game. It provides you with:
- HTML5 game template to get started with, based on Kontra.js.
- Realtime estimate of your game size after zipping!
- Download game as zip.
- Top it with the Code-blast mode to turn your game development experience into a gaming experience!
- Game development resources help.
Let’s see step by step how to start with building your game entry inside Web Maker.
1. Turn on the Js13kGames Mode
Open Web Maker here — https://webmakerapp.com/app/. Once you are inside Web Maker, open Settings by clicking the gear on the bottom right. Turn on the Js13kGames Mode from there.
Once you do turn that mode on and close the settings modal, you’ll see a shiny new Js13kGames widget in the footer that shows you how many days are left in the compo, your current creation zip size and a help button.
2. Create a new game from template
If you are a seasoned game developer, you’ll probably start creating your game from scratch. But if not, don’t worry. Web Maker comes in with a HTML5 Canvas game template for you to start with.
Click on the New button in the top header. Then click on Kontra Game Engine to fork a new creation from that template.
You’ll have a small starter code running in the preview that uses Kontra game engine! It’s upto you now to extend that small game into your winning entry. 😎 Read more about Kontra engine.
Turn on the Code blast! option from Settings for some extra fun :)
3. Using Image assets
Web Maker doesn’t have any image uploading options. But there is a direct option to go to Pasteboard.co and upload your asset there.
Once you upload your image on Pasteboard.co, copy the embed URL from there to use in your code.
4. Download your game
Once you are happy with your game inside Web Maker, simply click on the Js13kGames widget in the footer and choose Download game as zip.
Note: There is one caveat here though. Image assets you use in your game don’t get downloaded in the zip. That will have to manually added in the zip before submitting the game.
Just to re-iterate, Web Maker works offline (unless your are using some external JavaScript/CSS library).
Also, the Kontra.js based template is just to get you started with game development. But there is nothing stopping you from creating your HTML5 game from scratch.
Reach out to Js13kGames on Twitter for any questions — https://twitter.com/js13kgames
If you have any queries on Web Maker, reach out through any of the following channels:
- Twitter — http://twitter.com/webmakerapp
- Spectrum Chat — https://spectrum.chat/web-maker
