DEV Community

Cover image for Making a Video Game Using Phaser

Making a Video Game Using Phaser

Matthew Shin on May 01, 2019

Last week I was given the task of creating a single page application for a class project using a Javascript frontend with a Rails backend. After so...
Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

I made a game in Phaser with Typescript and Electron if any of you want to use it as a point of reference

Swap'N'Pop Logo

Swap'N'Pop

Download: swapnpop.com

Cross-platform Realtime-Puzzle Game

We all remember our favorite match three puzzle game. Swap'N'Pop brings it back, but with a new look, new gameplay mechanics, with multiplayer designed for competitive play, integration with Discord and built in ranked ladder.

Project Info

We use Phaser together Electron to be cross-compatible. We recently switched to Typescript since we want to ensure typesafety. Webpack is also used to bundle all our files. Test Code runs through Chai and Sinon.

Current Team

Role Name Site
Developer Omenking
Developer Halfbakedprophet
Developer Cappu
Developer Skytrias
Concept Artist Wish deviantart
Spriter Neweegee deviantart
Spriter Gaem
Spriter RJ
Ui Jash
Music Jaxcheese bandcamp

Development

Please read the how to contribute code page on our gitbook for more info.

There are two package.json files

  • /package.json - the app itself, packaging the app for distribution
  • /app/package.json - additional devtools

To run the latest master branch locally:

  1. clone Swap'N'Pop
Collapse
 
mshin1995 profile image
Matthew Shin

Thanks for sharing!

Collapse
 
johncip profile image
jmc

Hey, what's that devtools pane you've got screenshotted on GitHub? It looks cool. Did you make your own?

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

100% made it myself.

Thread Thread
 
johncip profile image
jmc

That's sweet -- is it essentially inspecting the Phaser cache? Would you say it made debugging your game easier?

Thread Thread
 
andrewbrown profile image
Andrew Brown 🇨🇦

We're using our own data structure.
That devtool can step forward and back, fastforward rewind, snapshot a specific state and reload it.
Its an absolute must especially if you want to build a multiplayer game.

Collapse
 
redhoodjt1988 profile image
Jonathan Reeves

Dude that is awesome. Where did you get the assets for the game? Did you create them yourself? I am currently working on a real-time online multiplayer game with Phaser and was hoping you would be willing to tell me more about the backend side of your project to better understand how you implemented a login/username creation that saves the players score. Does the score get saved in a file the game creates locally in the temp folder of their computer or does it actually store it in a database you have on your backend? You can email me here jonathanedwardreeves1988@gmail.com. thanks

Collapse
 
lirantal profile image
Liran Tal

Looks nice, thanks for sharing!

Collapse
 
mshin1995 profile image
Matthew Shin

Thanks!

Collapse
 
thejoezack profile image
Joe Zack

Looks great, I didn't expect it to look so smooth. Great job!

Collapse
 
mshin1995 profile image
Matthew Shin

Thank you!

Collapse
 
johncip profile image
jmc

Nice work!

Collapse
 
codemonk08_ profile image
Mayank Singh

Looks Great!

Collapse
 
mshin1995 profile image
Matthew Shin

Thanks !