Meet Kaplayer: The New Visual Map Editor for KaplayJS
With some free time as I search for my next profession role, I had the thought about putting together a course on Udemy. Specifically one where I teach how to build a platformer game in Typescript with the KaplayJS framework.
Planning this course led to a ancillary project idea. A way to easy design sprite based levels in web based game frameworks such as KaplayJS or PhaserJS. I wanted something open source and extensible. Something folks could potentially tailor to their personal project needs. And thus, I started building the prototype for Kaplayer.
You can try it out here:
https://supertorio-games.github.io/sprite-level-designer/
Why is this Tool Needed?
In these frameworks you often either place sprites positionally in code or, in the case of Kaplay, with an ASCI character map. This can be tedious and requires switching back and forth between code and the browser to see results. This tool allows you to design in a WYSIWYG editor and provides a customisable export of the level code.
The Workflow
Working with the tool is intentionally very straightforward. Firstly, you upload your sprite sheets with matching XML definitions. (In the future I plan to add further sprite management workflows). The assets I'm using in these screen shots are the amazing free assets from Kenney Game Assets. Available here: Kenny Platformer Pack
From here you have a set of tools, with accompanying hot-keys, for painting your level into a grid of your desired size.
And finally, you can press the display code button to get the ready to copy and paste code to add to your project. For now it's just KaplayJS, but a PhaserJS export is on the roadmap. From the code view, you can further customise the generated code by providing pathing to your sprite files as well as a context prefix for any Kaplay method invocations.
Looking Ahead (The Roadmap)
This is a preview release, with very MVP functionality. There are a number of features on the roadmap I hope to integrate in the coming weeks.
- PhaserJS Code Generation - Phaser is one of the most popular web game frameworks out there.
- Physics Layer - The same paintable functionality for describing physics interactions; Collision sprites, Solid areas, etc.
- Sprite layers - The ability to create layers of sprites for backgrounds and other uses.
- Localisation - i18n is already integrated, so adding further languages is a priority.
- Reliability - Adding in documentation and test coverage to make sure further development runs smoothly.
Your Feedback
The project is available on Github at https://github.com/Supertorio-Games/sprite-level-designer. The app is also deployed to Github pages at https://supertorio-games.github.io/sprite-level-designer/
I hope you'll give the tool a try and let me know what you think! I'd love to hear your thoughts and see your creations! You can send a message through this site, ping me on the socials, or open an issue on GitHub.