
Create-phaser-app for web-based game development - brulard
https://github.com/simiancraft/create-phaser-app
======
thosakwe
Not sure if I'm the only one who feels this way, but it seems to me that many,
if not most, JS starter kits are either over-engineered, or come with too much
out of the box.

If you really want to "quickly prototype" a game with Phaser 3, the easiest
way for me has been to just include Phaser from a CDN, download the Phaser
TypeScript definitions, and then just start an HTTP server. Adding a
tsconfig.json is just one extra, optional step.

If you're just prototyping a game concept, you probably don't need a module
bundler/Webpack at the start of your project; either you have to download a
starter kit, or spend time working out your build configuration. I personally
just think it makes more sense to figure out the build later on, when you
intend to release an optimized bundle.

I have similar complaints about Polymer's PWA starter kit (which comes with an
entire Redux setup and more). In general, I just think starter kits should be
the absolute bare minimum, rather than being opinionated.

~~~
allover
> Not sure if I'm the only one who feels this way, but it seems to me that
> many, if not most, JS starter kits are either over-engineered, or come with
> too much out of the box.

I think you'll have to be more specific. I don't find that to be the case for
'Create React App' for example. It's wonderfully curated and pretty amazing
for both prototyping and for production ready apps.

It also tries really hard to not be opinionated (e.g. no "global-state"
library, no single choice of CSS preprocessor).

> I have similar complaints about Polymer's PWA starter kit (which comes with
> an entire Redux setup and more)

Yeah, that certainly sounds overly opinionated. Redux should never be a
'default choice'.

> If you're just prototyping a game concept, you probably don't need a module
> bundler/Webpack at the start of your project

Kinda disagree here. I basically always want modules, even when prototyping.

~~~
lucideer
> _I don 't find that to be the case for 'Create React App'_

While I do appreciate CRA not bundling redux, et al, it's hard to say having
47 _top level_ dependencies and being over 180MB in size isn't coming with
"too much out of the box" for a basic app boilerplate.

------
ploggingdev
Perfect timing. I just started reading up about phaser since I was looking
into building a html/js powered browser based gaming site, something like
miniclip.com.

I am a complete beginner and I want to build a simple game to simulate trading
bitcoin. Let's call the main character Wojak (since it's the most popular meme
for bitcoin trading related discussions). Here's the idea : Wojak got into
Bitcoin early and made a nice little fortune and now stays at home trading
bitcoin on exchanges. I want the setting to be a house with furniture, a door,
a window and a computer. Maybe something slightly better than this :
[http://img.phone.baidu.com/public/uploads/store_4/d/7/6/d769...](http://img.phone.baidu.com/public/uploads/store_4/d/7/6/d7698bac4067c8fea53c5f307939faf4.jpg)

I will be using historical bitcoin price data to simulate a very simple
exchange the user can trade against. Here are my questions for anyone who has
built a game using phaser :

* Is phaser suitable for what I plan to build?

* can you give me an overview of what sort of time and effort building a game like this will involve?

* How do I generate the assets, models of the furniture? What tools are commonly used?

* How do I get audio for the background music and some simple effects for the scenes? Any good resources for this? Maybe there are apps that can help with this?

* Any good tutorials to get me up to scratch in understanding how browser based games work from a developers point of view?

* Any good resources and communities that might be helpful for what I have in mind?

I started looking into phaser and building browser based games a couple of
hours ago, so apologies if the questions and my thinking are all over the
place.

~~~
funkaster
if you're just starting game dev, then pick an established game engine, like
Cocos2d-x or Unity. Both can produce web builds.

~~~
thosakwe
I think it's fair to say that Phaser is pretty established. If you're just
targeting the Web+2D, you can get a smaller output too, rather than, say,
bundling Unity into your game.

Not a knock against those two, they're both quite good. Phaser is definitely a
reasonable option, though.

------
nicolodavis
Neat! I've been debating adding a similar starter kit for
[https://boardgame.io/](https://boardgame.io/), but opted not to because:

1\. React / Angular / Vue starter kits already exist to bring up the general
web stack, which is where most of the boring boilerplate lies.

2\. Removing parts of boilerplate that you don't need is work, so you need to
provide a default that works for most people, which is hard.

The approach I follow is to distribute a CodeSandbox link with a working
example that people can download / modify if they want to start from a
template:
[https://codesandbox.io/s/rn2pp207o](https://codesandbox.io/s/rn2pp207o)

------
lostgame
The control scheme and physics in the demo leave _much_ to be desired.

I understand the effect is to make the mech feel 'heavy', however I found
fundamental things like turning, and especially jumping under a certain level
of acceleration, to work a very limited amount of time, making the game
borderline unplayable to the point where I closed it very quickly.

It's personally very much a turn-off for me when I see a framework who's
example doesn't present what seems to be a full package.

The graphics system looks _fantastic_ , and it runs at a very solid framerate,
however, if I can't play it, what good does that do?

------
Madmallard
Looks pretty set to the game type it is.

I would have preferred something that just has a menu, an options scene, then
a gameplay scene without much going on.

------
the-simian
Hi, I'm the author of this, but I'm not the person that posted this. I
actually wouldn't have necessarily come here to post at this phase of the
project. I don't feel like I've reached a version 1 of what the goal of this
project is.

So a few things.

Firstly: the goal of this project.

This is not meant to be a super-minimal js boilerplate. In that sense, it is
not create-react-app. It does have a fairly comprehensive and complete build
process, and in that sense it is. It even will have a pretty nice
preprocessing process as well, which can do a lot. I’ll talk more about that
later.

I find that with a lot of boilerplate projects for Javascript game dev,
there's usually such a spartan setup, that the delta between the
'bootstrapped' project and actually making something is still very great. One
of the things that makes a lot of other frameworks useful is that there's some
convention in place to help, at the very least, organize your project. I gave
a talk about this at the beginning of this month at a conference in Oklahoma
called Phaser: How to Draw the rest of the Owl

[https://slides.com/jesseharlin/set-phasers-to-
javascript](https://slides.com/jesseharlin/set-phasers-to-javascript)

There are the slides from this talk if you're curious.

There are a few things about his project that are opinionated, and they are on
purpose. Unity, Game maker and a lot of other tools that are often favored for
projects like game-jams because you can get up and running _quickly_. It means
you adopt some conventions in order to work more quickly. I intend for this to
be a lot like that.

Here’s some stuff you need to know about this project.

1\. It just isn’t done yet. I plan to convert it to a lerna-style scaffold,
and a lot of the modules in it will be plugins. That hasn’t happened yet, but
it will and is a top priority. This project is to be a scaffold, not a
boilerplate in the long run.

2\. One opinion is that you are going to use Tiled in some way to make levels
if your game needs levels. I consider this project one that ‘relies’ on Tiled.
It’s the only sensible open source tool that could even let you compete with a
more sophisticated game making system. If you don’t need Tiled, that’s ok, but
most games have some concept of levels and enough need them I wanted that to
be there. That means:

3\. I’ve made some decisions about a good starting point for controlling
animations. Too many frameworks start with an overly simple approach, and any
complexity quickly becomes unwieldy. I explain this in detail in my slides. I
made an animation manager that allows you to chain animations, and I use a
Finite state machine to organize transitions (machine.js). I go into a lot of
detail here in my talk. And a tiny bit of detail in this other talk from a few
months ago:
[https://www.youtube.com/watch?v=lDNmu_9J2p8](https://www.youtube.com/watch?v=lDNmu_9J2p8)

4\. This project has a pre-processing step, and that’s something that makes it
unique in this space. This currently does a few things for you. It can extrude
your tilemaps so they don’t literally cause graphic glitching when you run the
game. You can also target Layers from tiled and use a flood-fill to generate
polygons that can be used for Physics and Raycasting. The light you see is
using this. I _just_ wrote this a few weeks ago. You can also minify images,
etc.

5\. The file organization also is meant to simplify this workflow, but I need
to make changes even now. I’ve realized I need to have a separate concept of
biomes and levels. A lot will likely change here. As I said, this project is
super new.

6\. I intend to encourage systems-music and Html5 audio in future iterations.
I think the barrier for entry for these tools is too high, and to be honest,
if your game loads mp3/ogg files that’s likely the biggest assets in your
game. This means you’d more likely play a MIDI sequence and use Tone.js than
load a recording. It is a similar technique to how older game systems managed
audio, because it has a smaller footprint and performs better. You're not
going to be forced to do this, but I'd like it to be easy to do this.

7\. I am prototyping a way to make in-game ui easier, with Html. I know a lot
of Html5 game devs that use frameworks like Vue and React to handle things
like minimaps, lifebars and other overlay elements. It is just a fact that
making something as simple as a form input in canvas is a time consuming
nightmare compared to Html + css + js. I discuss this at length in this issue
here: [https://github.com/simiancraft/create-phaser-
app/issues/18](https://github.com/simiancraft/create-phaser-app/issues/18) .
My plan is to use React for UI and work out some simple bindings so that you
don’t spend 4 hours trying to make a start menu or a player-name input.

8\. I plan to use the raycasting module and a behavior tree plus the FSM I
already included to manage enemy AI. I want something more sophisticated than
a simple patrol. Something that acts differently when it sees a player. I have
a clear vision of a good pattern to follow here. Remember, this project is
about how to eventually draw the rest of the owl. I want to show you a good
pattern for this in the scaffold. I’d like you to easily be able to add
enemies at certain locations in a map in Tiled, and with some small effort
have them perform useful behavior, such as attacking or chasing a player on
sight, and patrolling before they see you.

9\. I’ll know it is done when you can scaffold a game and make something
that’s better than what current Html5 boilerplates afford you and you can
actually work close to as quickly or more quickly than someone using something
like Game Maker. That doesn’t mean feature parity, but if you want to make a
game in Js _right now_ at a game jam you’ll spend way way too much time
fiddling with a build system, and if you go ‘ the low road’ and keep it
spartan, you’ll find your final products will be railroaded into overly
minimal and feature anemic results.

10\. I’m not touching anything related to server-side state, nor will I be
prescriptive about that. You gotta draw the line somewhere. I am also not
going to touch multiplayer with a 10-ft pole. If any of you have ever made a
game with multiplayer that requires any sort of meaningful real-time
interaction you probably already expected that. This project is going to be
about the client-side game.

There are a few criticisms of this project that I think are fair. I’ll address
a few I saw.

One is that the controls are "clunky", and to be honest you're right. I think
the test map I have made is not a very appropriate size for the player
character. It is a bit claustrophobic, but I've not spent any cycles on this.
My development time is tight, so I am trying to focus on things I think are
more important before I hit a version 1. If you look in the source, the main
purpose of the map so far has been to allow someone to organize a pre-
processed and post-processed map. Also, I wanted to include some items to
modify the mech’s speed and add the jetpack and things like that later. Yes
the mech is supposed to feel ‘heavy’, but there’s other problems that make
this not feel enjoyable. The main purpose of this mech was to have a player
character with many animations states and in-between states. Sliding, Jumping,
Boosting, shooting, shooting-while-walking and so on. Look at the way its
organized with the finite state machine, and you’ll get why I did this. I
wanted something with more complexity than “mario” to teach a user how to
organize their work. I think that aspect was successful, but I have more ideas
on how to improve it.

I do appreciate the positive feedback on the “graphics system”. I built the
raycasting module that makes the light just a few weeks ago, and all the
pixelart in the game (player and level) myself. I am far, far, far from done.

Another criticism is that the framework seems very set to the sort of game
that it is right now. Yes, it does seem that way at the moment. I needed to
pick a common game type that required a lot of common functionality to get
started. I promise the final state of this is to not tightly couple you to a
platformer, but I can see now that with no context it seems that way. I
promise it will not stay that way. If you do still want something dead-simple
go check out the other boilerplates or use mine and just delete the sprites
and the game scenes. Seriously, just delete what you don’t need, it will still
build and work just fine. I will likely have a scaffolding option to account
for a super-minimal build when I convert to lerna-style scaffold.

Thank you all for looking at this. Please please remember that this project is
very early in its lifecycle, but I still hope you find it useful even now.

