[WIP] Creating a Mobile Game from Scratch with Phaser 3


#1

You can play it here: Endless Cave HTML5 Game
Or download on Android: Endless Cave Android Game

Direct Link: Video Episodes on YouTube
Direct Link: Written Episodes on my Dev Blog

Hey guys I started a series where I create a mobile game with Phaser 3! The game is called Endless Cave and it’s an endless runner with some dungeon crawler elements.

And the series is a mixture of a vlog / blog / tutorial where I go from scratch all the way to porting the game to Android and iOS.

This is really about putting myself out there and letting others learn from my mistakes & criticize my whole gamedev workflow. I love creating games and I hope by publicly showing what I do, I’ll improve much quicker than I would doing it alone in my home office.

Episode 1 & 2 are about preparation, where I quickly share some thoughts on Market Research & 2D Game Art. These are two things I didn’t really think about in the past before I started creating a new game. But now I find it very important so I wanted to cover it in this series also.

In Episode 3 I’ll start coding the game. As I release more episodes I’ll keep updating this thread.

Game Link: Endless Cave HTML5 Game

Episode 01: Market Research
Episode 02: 2D Game Art
Episode 03: Game Set Up
Episode 04: Creating a Slick Loading Screen
Episode 05: Main Menu with Phaser 3 Scenes
Episode 06: Creating an Endless Scrolling Floor Background
Episode 07: Adding Entities & Player to the Game Pt. 1
Episode 08: How to Create Sprite Animations
Episode 09: How to Create Touch Controls & Mouse Controls
Episode 10: How to Create Improved Player Controls to Make the Player Turn
Epsiode 11: How to Create Randomized Levels
Episode 12: Procedurally Add Infinite Rooms to the Level
Episode 13: Create & Handle Walls Collision Detection
Episode 14: How to Handle Player Deaths
Episode 15: Creating the Main User Interface
Episode 16: Button Prefab for All Your Phaser 3 Games

My Twitter: James Pierce Twitter
Videos go on my YouTube Channel: James Pierce YouTube
Written summaries go on my Dev Blog: BrowserGamesHub.com

We’re also a small group of gamedevs on my Discord channel, tossing ideas back and forth: Gamedevs Discord

Thank you guys!


Growing a Game Studio through Crowd Funding
#2

Love your ambition! When it’s complete are you considering place the course on Udemy.com, SkillShare.com and others???


#3

Thank you!! I really appreciate you said that.

Actually I haven’t really thought about that! Right now I’ll just focus on completing this series and letting as many ppl know about it as I can. If there is big enough interest I’ll definitely do whatever people want / need / ask for! For starters, I’ve set up a Patreon’s page and I’ll make the source code available to backers. If there are people backing this I think it’s a good indicator they’d also be interested in an online course.

It’s hard to say right now! I didn’t start this with a product in mind. I just want to create better games and have a lot of people play my games. I hope sharing the process online will help me get there!


Growing a Game Studio through Crowd Funding
#4

Looks good! I’m in the process of making a mobile game using Phaser 3 so I’m looking forward to seeing how you go about the next steps to compare to what I’m doing.

Cheers!


#5

That’s awesome! Would love to see your game when it’s finished.

Sorry I haven’t released any code yet, it takes a lot of time to produce the videos & blog posts in the evenings. But I’m working on it and I’ll release minimum 1, hopefully 2 vids this week.

Thanks so much for following along!


#6

I was playing with idea to make mobile app with phaser but didn’t tried jet, so I’m pretty interested into this.


#7

This is so motivating to hear! I’ll try to get something online tomorrow! Else Wednesday for sure :muscle:


#8

Episode 03 is live now! Check it out if you enjoy the series.

Episode 03: Game Set Up

Fyi :slight_smile: @PBMCube @B3L7 @kiklop133


#9

I added these two direct links to the very top because I think as this thread grows it’s going to be annoying to keep scrolling down just to see a new episode.

Direct Link: Video Episodes on YouTube
Direct Link: Written Episodes on my Dev Blog


#10

Well done,Watched without coding so need to watch at least one more time :slight_smile: Also surprised how many initialization files are present. And nice to see classic notepad++


#11

Thank you for watching and the positive feedback! I think that for a prototype or small project you could also use less files. For example in many Phaser examples you will see that all the scenes are actually in the same file together with the app configuration.

However, because we are building a fully fleshed out mobile game that we will port to Android & iOS, structuring it from the get-go makes more sense to me. It also makes it easier to explain what we are currently working on when each file has a specific purpose.


#12

I was just wondering, and yea good organization is the key.


#13

Thanks, I appreciate the update


#14

Episode 4 is out now!

How to Create a Loading Screen with Phaser 3

Hope you like it :slight_smile:


#15

The written summaries for the latest episodes are done!
Episode 03: How to Set Up a Mobile Game with Phaser 3
Episode 04: How to Create a Loading Screen with Phaser 3


#16

Episode 5 is live now!

How to Create the Main Menu with Phaser 3 Scenes | Endless Cave 05

Also the game is almost completed and you can already play it on my games website :slight_smile:


pinned #17

#18

Hey guys a quick heads up that the web version of the game is now done!

You can play it here: Endless Cave HTML5 Game

Episode 06 in the video series is coming soon after Christmas!


#19

Congratulations on this excellent serie that is helping me understand Phaser 3

I don’t know where to ask you (here or on youtube) about your resize function as I use Phaser 2 CE and the built in scale function make it works fine on mobile devices as you can see on this game

So my question is : you propose to use 360 x 640 but as you can see my game fits in mobile device even if it is 640 x 960 so what should I do ?


#20

Maybe I’m wrong but far as I know, James’s resize code is tied to hight of the screen, so if your screen is too wide you’ll have black side bars or if your screen is like new 18:9 ratio the game will by slightly cropped. But you’ll want more likely make custom resize function for your specific game. Anyway, for this tutorial is that function all we need.