Welcome to Part Two of this four-part series on building a mobile game using open source technologies. We'll be using Phaser, along with Ionic, Cap...
For further actions, you may consider blocking this person and/or reporting abuse
Impressive tutorial and write up! 👏👏
A video would be great! 👍
Same can be done with react native right? And with ionic or Cordova directly. What is the benefit of using Vue in this case at all?
Great tutorial though, although nowadays making games with JS is just not efficient enough with popularization of platforms such as Godot. Back in the days I'd kill to find an article like this, pity couldn't find much.
I’m not sure if you can use Phaser with React Native. RN has its own ecosystem of compatible libraries, where with Ionic you can use any of the same libraries you’d use for a web app. On initial search it looks like there is a Phaser Expo library but I haven’t used it.
Ionic Framework is the UI toolkit for building the mobile app that houses the Phaser game and isn’t explicitly required. You could code your game/app with any framework or just JS and use Capacitor (built by Ionic) or Cordova to compile to native mobile.
I prefer to use a JS framework with Ionic components (you can use Angular, React, Vue, or vanilla JS). I like Vue because it has a great DX. We haven’t leveraged it much so far in the tutorial, but it’s helpful when managing data and state across components, which we’ll dig into more in the next section.
Additionally, while there are some great resources on Ionic Angular and Phaser, I couldn’t find any existing resources for the combination of Ionic Vue and Phaser, so I decided to write up a tutorial based on my experience.
Got you. Leveraging Vue states in game development may prove useful and actually quite convenient. It is great that there are people filling the gaps of un-tutorialed combos. Looking forward to next parts.
I loved your post! I'm looking forward to the next parts. I'm trying it out with Android, and it's working wonderfully for me. I only modified the following line of code in the PhaserContainer.vue file with this:
// @ts-ignoreimport { launch } from './../game/Game.js';
since it was telling me that it couldn't find any declaration for the Game.js file.
Thank you!!
Thanks for the great guide. That's what I was looking for. After all, I'm in the process of developing an online game. I want to create a similar platform like bestcasinoplay.com/online-slots/al... because as far as I know, it is very popular. This is a great option to make money.
I find this tutorial pretty cool, but why are you using ionic + vue with phaser? What is the point? doesn't it make it bloated?
It depends on your app. If you are building everything in Phaser and don’t have much or any app functionality outside the game, then you may not need a framework.
Ionic Vue provides components and functionality for building the UI of a mobile app that can be helpful if you want to have app functionality outside the game. Then, Capacitor lets you compile for native iOS and Android without needing to connect to a web server. You could also build a Phaser game and compile to native with just Capacitor if you don’t need mobile app components or functionality.
Check out this video and others from OpenForge for more on the benefits of combining Ionic and Phaser: youtu.be/oCq_tXX-0HQ?si=H4wzHeRi-H...
Ultimately you’ll choose the stack that works best for your app.
Cecelia, great series! Is part 3 still coming at some point?
Hi Mike, I know this is a long time coming, but I finally published parts 3 and 4. You can find them here: dev.to/ceceliacreates/working-with...