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


#21

@nazimboudeffa Thank you for your kind words about the series! You can ask questions on any channel (yt, forum, twitter, discord) that suits you, I’m trying my best to help out where I can :smiley:

So I’m not quite sure if I understand the question though. I checked your game and it appears to be scaling fine? But you are saying it has a different aspect ratio and still works, even though I suggested other width & height?

The game size of your Phaser 3 game is not set in stone in any way, apologies if that came across in the video. Your game size must depend on your game requirements, art assets, and especially the target platform. For this series we are creating specifically a mobile game, that is to be played in portrait mode. Now, it just so happens that 360 x 640 works really well for mobile games in portrait mode, because it scales well on a large number of mobile devices! That’s why we are going for this one.

@kiklop133 you are exactly right! The resize function keeps the aspect ratio of the game AND it takes the dpi value of the playing device into consideration. Consequently, there are devices with a screen that has a different aspect ratio than your game and we apply the black borders. Pretty much all movies have been doing this for a long time now also (you get the famous black borders to keep the movie’s aspect ratio on your TV). If you didnt keep the aspect ratio and wanted to fill the whole screen no matter which device, it would stretch the game horizontally or vertically.

There are ways to account for that by resizing the background for example, depending on the device, and posotioning the game elements accordingly. Consequently, a device with higher resolution would see more of the game than one with lower resolution. This can also work well, depending on the game.

@nazimboudeffa Does this help?


#22

@nazimboudeffa forgot to add: in the resizeApp() function you have to use the width and height of your particular game in the first line where you calculate the game_ratio. The code snippet I posted uses my game’s values so if it’s not the same, you need to overwrite that.


#23

Yes it is of course. I didn’t imagine that my question will get a so long answer and interest from you so thank you again, in fact I am talking about my game in Phaser 2 CE that is on my itch.io account and is inspired from https://www.emanueleferonato.com called make a Bejeweled like game with Phaser that I just started to scale on mobile divices without quitting the site and making it mobile friendly and uses the built in scale functions


#24

Ahh sorry, you are talking about Phaser 2 specifically! In Phaser 2 I always used the built in scale manager and it worked perfectly for me, as well. I’m glad you got it working so fast!


#25

So we are okey on the Phaser 2 CE scale function, now moving to Phaser 3 I am just starting to use it, so again thank you for the serie it is relly interesting and as I said the most interesting part for me is the scale function


#26

Thank you for watching and following along in the series! Rich is already working on a Scale Manager for Phaser 3, so I think soon we won’t need the resizeApp() function anymore. But it’s still helpful to have gone through the process ourselves and trying to learn what it takes to scale a game!


#27

Endless Cave is now on Android! Free Download from the PlayStore: Endless Cave Android Game

promo01


#28

Runs fine on android 8.1 / 16:9 ratio phone. Also like the fact that app is under 10MB unlike other major game engines.


#29

Thanks for the feedback, much appreciated!

All credit here goes to @rich, it’s one of the many advantages of using Phaser 3 :smiley:


#30

Episode 06 is done! Video Link: How to Create an Endless Scrolling Floor Background

In this Episode, we are starting to code our main game loop by creating a floor background that scrolls endlessly, creating the illusion that we are running deeper into the cave.

Check it out and let me know if you have any questions!


#31

Episode 07 is out now! Video Link: Adding Entities & Player to the Game Pt. 1

It is time to add Entities and the Player to the game world! In this episode, we start coding the Entity prefab, from which we can later extend all the other game objects like the Player, Monsters, etc.

Hope you like it!


#32

Just a quick update: Finally, the Score Board is accessible from directly inside the game!

Side Note: Episode 08 on YouTube should be done tomorrow!


#33

Will your tutorial series be talking about how to use Cordova or other platform to convert the game to be a mobile app?


#34

@Amidos2006 Yes, will cover that also using Cordova. The point of the series is to go from literally 0 all the way to the end.

If you are interested in the Cordova process specifically, I already have a blog post about it on my dev blog:
Convert Your HTML5 Game Into An Android Game with Cordova


#35

Thanks for the response, Do you have one for iOS Apps, the problem is iOS is not allowing Cordova to load local file somehow and I have a long post about the problems I am faced do you know a solution for that or did you get faced with any of these problems

https://phaser.discourse.group/t/troubleshoot-cordova-phaser-3-the-preloader-scene-is-being-refreshed/625/7


#36

@Amidos2006 I’ve just read through your other thread and I’m honestly not sure what could be causing this. I’ve only used Cordova to create Android apps, I haven’t done any iOS apps so far. If I find something that could fix it, I’ll let you know :+1: Sorry I can’t say anything more useful than that :frowning:


#37

Episode 08 is live on YouTube! How to Create Sprite Animations in Phaser 3

This time we look at how to create smooth animations from sprite sheets with the Phaser 3 framework.

thumbnail


#38

Episode 09 is uploaded and ready! How to Create Touch Controls & Mouse Controls


#39

Episode 10 is LIVE guys! How to Create Improved Player Controls to Make the Player Turn


#40

Episode 11 is UPLOADED! How to Create Randomized Levels

This is a tough one, so make sure to ask questions if it’s confusing!