WIP: RPG-template, phaser typescript rollup

Showcase
1

Hi all! I’m Dani, a new member of this awesome community since few days ago. I’m a frontend developer with experience in JavaScript developing a lot of websites and applications for last 10 years, but I never developed a game. One month ago I started to deep dive in JavaScript game development, and phaser3 was the most interesting framework for me.

TLTR. I’m creating a template to develop rpg with phaser3, typescript and rollup. Here’s the link.

I decided to start with something interesting avoiding ‘hello world tutorials’, so a classical RPG wit 16x16 arts and grid system movements was my choice. It was hard, I don’t recommend this way to beginners, no matter your development experience. A lot of questions delayed my development, how to switch scenes? How to move the player tile by tile? How to create maps with pokemon style? How to create sprites for animations?…

Now I’m developing the game, I spend one month learning, choosing libraries, comparing assets… and 80% of my time configuring the game and putting tools to work together. At the beginning I was struggling looking for a template, reading a lot of code, and I would like to save time to beginners with this template offering a boilerplate with some key resources like tutorials, youtube vídeos, and a well structured and commented code.

There are still few things to do, develop a dialog system (or implement a plugin for that, suggestions accepted), change tiles png by others royalty free (I used one from LimeZu that I purchased), implement quest plugin by @rexrainbow (which is giving me some problems due to rollup issues with Papaparse, but I’ll hit that wall few days more before open an other post), and good documents to explain how to develop a game using this template.

I tried to use the best practices that I learned as a developer, but honestly don’t know if them applies for game-development although seems to fit well.

So, pull request, feedback, tips and comments are more than welcome!

2

Hi @danielart , there are plenty boilerplates for creating games with phaser:

These are just the main examples, there are plenty more if you go over the forum or google a bit about it.

As personal recommendation, if had to start from scratch now (after 4 years on developing games), my setup would be:

  • TS, EsBuild (or Parcel as second option) for the code base (to later transpile to whatever I need).
  • MatterJS as physics engine on server and client side for 2D multiplayer games (and still using Phaser for the rendering).
  • CannonJS (not the official but one of the manteined forks) as physics engine for 3d multiplayer games.
  • If you are not using physics, then a single class/component that you could use on both sides (server and client), in case you want to do a multiplayer game.
  • Always Colyseus for communications.
  • And for last a storage system like Postgree SQL or Firebase.

Hope this helps.

Best,
Damian

3

Wow I was googling for hours and I didn’t found that template, is awesome. I saw a lot of templates with no more than 3 stars on github, don’t know how could I missed that.

I’m trying to create a template specific for rpg, with an easy way and ready-to-go components to create scenes, quests and characters. May be nobody will use it but I’m learning a lot and that’s what I’m after.

I saw you recommend ESbuild or parcel, so I guess Rollup is not a good option at all… I’m struggling a lot with that…

Thanks @damian-pastorini Damian for your time, now I have to process all that info and I’ll be back soon with the result.

4

hi @danielart , at the beginning is quite hard to catch up with everything. You can also check my proyect, reldens.com
Is an open-source platform for multiplayer rpgs, it even has an admin panel to control the game contents (wip).
From there you can see how Ive used parcel as builder for the client, and you can strip most parts of the proyect if you want to use it just for rpg.
For last, several modules like items and skills were implemented as independant packages, so you could even use those if you like.

Feel free to ping me on Discord if you want to have a chat about everything.

Good luck!

5

UI

Dialog is a conventional ui element. You can try this dialog plugin which is part of rexui.

Command sequence

You might also need a controller to execute a sequence of actions. Two possible plugins listed below

However, these 2 plugins do not contain branch executing (e.x. if… else…), so you might need a high level controller.

1 Like