Porting Replit (Phaser) game to IONIC/ANGULAR

I mentored three D-Tech high school student over two weeks that came up with the game  https://blank-game.lorenzoharrold.repl.co/

Source code available at https://replit.com/@LorenzoHarrold/blank-game#index.html (requires invitation)

I decided to investigate how to port it to a locally hosted environment as well as the possibility of generating an Android/IOS from the code.

(Phaser is a JavaScript game development library)

– Setup the game development environment on CentOS/OEL 8.x or Mac OSX

[opc@phaser ~]$ sudo firewall-cmd –add-port=8000-8199/tcp
[opc@phaser ~]$ sudo firewall-cmd –add-port=8000-8199/tcp –permanent
[opc@phaser ~]$ wget https://download-ib01.fedoraproject.org/pub/epel/8/Everything/x86_64/Packages/s/screen-4.6.2-12.el8.x86_64.rpm
[opc@phaser ~]$ sudo yum localinstall -y screen-4.6.2-12.el8.x86_64.rpm
[opc@phaser ~]$ sudo setenforce 0
[opc@phaser ~]$ sudo yum install -y curl wget git

– You can download the MAC OSX installer or zip file from https://nodejs.org/ (e.g., node-v16.13.0-darwin-x64.tar.gz)

[opc@phaser ~]$ wget -O node-v16.13.0-linux-x64.tar.xz “https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz
[opc@phaser ~]$ VERSION=v16.13.0
[opc@phaser ~]$ DISTRO=linux-x64
[opc@phaser ~]$ sudo mkdir -p /usr/local/lib/nodejs
[opc@phaser ~]$ sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs
[opc@phaser ~]$ sudo chown -R opc:opc /usr/local/lib/nodejs
[opc@phaser ~]$ cp .bash_profile .bash_profile.org
[opc@phaser ~]$ cat >> .bash_profile <<EOF
# Nodejs
VERSION=v16.13.0
DISTRO=linux-x64
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH
CAPACITOR_ANDROID_STUDIO_PATH=/home/opc/android-studio/bin/studio.sh
export LANG=en_US.UTF-8
EOF
[opc@phaser ~]$ 

– NOTE: on Mac OSX, the default shell is zsh, so the profile file is .zprofile and not .bash_profile

[opc@phaser ~]$ . ~/.bash_profile
[opc@phaser ~]$ rm -rf .npm-global
[opc@phaser ~]$ npm –version
8.1.0
[opc@phaser ~]$ npm i -g @ionic/cli
[opc@phaser ~]$ /usr/local/lib/nodejs/node-v16.13.0-linux-x64/bin/ionic –version
6.18.1
[opc@phaser ~]$ npm remove -g  formidable@1.2.6
[opc@phaser ~]$ npm i -g formidable@v3


--- Install Angular globally. Alternatively, you can install it per project
aitayemi@aitayemi-mac ~ % npm install -g @angular/cli
aitayemi@aitayemi-mac ~ % npm install -g @angular/core

—- List globally installed packages (“npm ls”  in the top level directory of a project will list only packages installed in that project)

aitayemi@aitayemi-mac ~ % npm ls -g
/usr/local/lib/nodejs/node-v16.13.0-darwin-x64/lib
\__ @angular/cli@13.0.3
\__ @angular/core@13.0.2
\__ @ionic/cli@6.18.1
\__ corepack@0.10.0
\__ formidable@3.1.3
\__ npm@8.1.4

——————- PORTING THE EXISTING SCAVENGER GAME FROM REPLIT —————-

—– create a blank Ionic project

aitayemi@aitayemi-mac ~ % ionic start scavenger blank –type=angular
aitayemi@aitayemi-mac ~ % cd scavenger
aitayemi@aitayemi-mac scavenger % npm audit fix 
aitayemi@aitayemi-mac scavenger % 

—– INSTALL phaser into the project, then update index.html to use a local copy (alternative to downloading the phaser from the repl.co as configured in the index.html)
aitayemi@aitayemi-mac scavenger % npm install -D phaser
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % cp node_modules/phaser/dist/phaser.min.js src/assets

———- COPY the replit game files from replit to the assets sub-folder ————————–
– index.html goes in the src folder, while all other files go in the src/assets folder 

aitayemi@aitayemi-mac scavenger % ls
angular.json            e2e                     karma.conf.js           package-lock.json       src                     tsconfig.json
capacitor.config.ts     ionic.config.json       node_modules            package.json            tsconfig.app.json       tsconfig.spec.json
aitayemi@aitayemi-mac scavenger % ls src
app             assets          environments    global.scss     index.html      main.ts         polyfills.ts    test.ts         theme           zone-flags.ts
aitayemi@aitayemi-mac scavenger % ls src/assets
GridLayout.js           addons.js               endPage.jpg             firespritesheet.json    inhouse2.jpg            phaser.min.js           sounds                  wall-e.jpg
Scene1.js               brick.png               finalBook.png           firespritesheet.png     main.js                 robot01.png             spritesheet.json        well.png
Scene2.js               broken_robot.png        fire_spritesheet.json   helper.js               open-book.png           robot_sprite.png        spritesheet.png
SimpleScene.js          dude.png                fireezgif.png           icon                    openbook.png            seedPack.png            tilesets
aitayemi@aitayemi-mac scavenger % ls src/assets/tilesets
door.png        floor.png       green.png       hazard.png      mario.png       purple.png      stair.png
aitayemi@aitayemi-mac scavenger % ls src/assets/sounds
terminator2b.mp3
aitayemi@aitayemi-mac scavenger %

————- remove dependency on Replit by downloading the various Javascript files referenced in index.html to the src/assets folder and updating the index.html to reference the local files instead

aitayemi@aitayemi-mac scavenger % curl -o src/assets/phaser.js https://game-lib.leonyoung.repl.co/phaser.js   (optional since we will use the installed phaser.min.js file)
aitayemi@aitayemi-mac scavenger % curl -o src/assets/helper.js https://game-lib.leonyoung.repl.co/helper.js
aitayemi@aitayemi-mac scavenger % curl -o src/assets/addons.js https://game-lib.leonyoung.repl.co/addons.js
aitayemi@aitayemi-mac scavenger % curl -o src/assets/GridLayout.js https://game-lib.leonyoung.repl.co/GridLayout.js
aitayemi@aitayemi-mac scavenger % curl -o src/assets/SimpleScene.js https://game-lib.leonyoung.repl.co/SimpleScene.js

——– EDIT index.html to update the location of relevant files including Scene1.js and Scene2.js scripts:
aitayemi@aitayemi-mac scavenger % grep script src/index.html
    <script src=”https://game-lib.leonyoung.repl.co/phaser.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/helper.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/addons.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/GridLayout.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/SimpleScene.js”></script>
    <script src=”Scene1.js”></script>
    <script src=”Scene2.js”></script>
    <script src=”main.js”></script>

aitayemi@aitayemi-mac scavenger % vi src/index.html 

aitayemi@aitayemi-mac scavenger % vi src/index.html
aitayemi@aitayemi-mac scavenger % 
aitayemi@aitayemi-mac scavenger % grep script src/index.html
    <script src=”assets/phaser.min.js”></script>
    <script src=”assets/helper.js”></script>
    <script src=”assets/addons.js”></script>
    <script src=”assets/GridLayout.js”></script>
    <script src=”assets/SimpleScene.js”></script>
    <script src=”assets/Scene1.js”></script>
    <script src=”assets/Scene2.js”></script>
    <script src=”assets/main.js”></script>
aitayemi@aitayemi-mac scavenger %

————- ADD  <base href=”/”>  to the index.html so that all the referenced files can be located
aitayemi@aitayemi-mac scavenger % grep -B1 “</head>” src/index.html
    <base href=”/”>
  </head>

aitayemi@aitayemi-mac scavenger %


————- RUN the game with either ionic or ng. (“npm run build” creates the “www” sub-directory).
aitayemi@aitayemi-mac scavenger % ionic serve –external
aitayemi@aitayemi-mac scavenger % npm run build
aitayemi@aitayemi-mac scavenger % ng serve

———— ACCESS the game using a web browser with either the loopback interface or the IP address of the system running the ionic environment e.g., http://<ip-address>:<port>/ )

————————————- END OF GAME PORT ——————————————————

————————————————————————————————————————–

—————– OPTIONAL SECTION BELOW – BUILD GAME FOR ANDROID/IOS ————–

—— Install Android studio: https://vitux.com/how-to-install-android-studio-on-centos/ and https://developer.android.com/studio/install
[opc@phaser ~]$ sudo yum install -y https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
[opc@phaser ~]$ sudo yum install -y java-1.8.0-openjdk

— for Mac OSX, download JAVA from https://java.com/en/download/ (e.g., jre-8u311-macosx-x64.dmg) and install it

—- Download Android Studio from https://developer.android/com/studio (e.g., android-studio-2020.3.1.25-mac.dmg for MAC OSX)
[opc@phaser ~]$ tar xf android-studio-2020.3.1.25-linux.tar.gz
[opc@phaser ~]$ cd android-studio/bin/

—- RUN the Android Studio installer from a X-session such as MobaXterm and follow the prompts in the GUI wizard installer to complete the install:
[opc@phaser android-studio]$ ./studio.sh

—- INSTALL Cocoapods and (full) Xcode Developer Tools (from App Store)  – both are required to add “ios” to the project (one-time installation task for both). You need to accept the Xcode license after installation. Either launch the IDE and accept the license when prompted, or run “sudo xcodebuild -license” from Terminal session).

aitayemi@aitayemi-mac scavenger % sudo gem install cocoapods       (see https://guides.cocoapods.org/using/getting-started.html#installation to install it only for a specific user, instead of “globally”)

aitayemi@aitayemi-mac scavenger % xcode-select install

———– OPTIONALLY ADD Android & iOS application support/code – you need to install the necessary libraries/tools so the iOS support will only work on a MAC —————————-
aitayemi@aitayemi-mac my-game % export CAPACITOR_ANDROID_STUDIO_PATH=/home/opc/android-studio/bin/studio.sh

— installing locally for this project only as opposed to globally or linking the globally-installed packages to this project. Installing locally to the project only ensures that the correct versions of packages this project requires are installed in the project.
aitayemi@aitayemi-mac scavenger % npm install @capacitor/cli @capacitor/core
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % npm install @capacitor/android
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % npm install @capacitor/ios
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % ionic cap add android
aitayemi@aitayemi-mac scavenger % npx cap add android
aitayemi@aitayemi-mac scavenger % ng build
aitayemi@aitayemi-mac scavenger % ionic cap add ios
aitayemi@aitayemi-mac scavenger % npx cap add ios
aitayemi@aitayemi-mac scavenger % ng build

—- IN ORDER to build the Android version of the game code, you can either:
   (1) launch Android Studio from the MAC OSX Lauchpad, then select “File -> Open” menu in the Android Studio IDE, and select the top-level folder of the project (e.g., my-game), then select the “android” sub-folder, then the “open” button to open the project, OR
   (2) setup the CAPACITOR_ANDROID_STUDIO_PATH to point to the Android Studio executable so that the “ionic cap open android” command can launch the Android Studio IDE. On Linux, execute the “ionic” command from an X-session such as MobaXterm. On MAC OSX, launch the Android Studio IDE from the Launchpad, and then select the menu option “Tools -> Create Command-line Launcher…” to generate a terminal-executable file as /usr/local/bin/studio which you can then set as the value of the CAPACITOR_ANDROID_STUDIO_PATH variable. 
aitayemi@aitayemi-mac scavenger % export CAPACITOR_ANDROID_STUDIO_PATH=/home/opc/android-studio/bin/studio.sh
aitayemi@aitayemi-mac scavenger % export CAPACITOR_ANDROID_STUDIO_PATH=usr/local/bin/studio

NOTE: an alternate setup on an OCI instance (with no physical video card) couldn’t launch the emulator. I see “Starting AVD…” at the bottom right of the IDE but the emulator (device) never shows up. I think this is due to the lack of a video card on the instance.

NOTE: Open “Tools -> SDK Manager” from the Android Studio IDE menu, select/check “Android 11.0 (R)” under the “SDK Platforms’ tab. This line shows 30 under the “API Level” column and and that corresponds to the line “targetSdkVersion = 30” in the my-game/android/variables.gradle file. Android Studio will ask you to confirm the download of the SDK (click OK), then follow the installation wizard prompts to complete the installation (without this step, you will get a “module not specified” error and won’t be able to compile or run the project. You may also see a message concerning failed gradle sync at the bottom of the interface. Without this step, you may not be able to build the project (especially if it depends on the “Android 11.0 (R)” SDK.

— IF you don’t have a real/physical Android device connected, then use the “AVD Manager” (“Tools -> AVD Manager” menu option) to create a suitable emulated (Emulator) device

NOTE: I couldn’t build the native apps successfully in Android Studio or X-code if I use “ionic cap add android/ios” instead of “npx cap add android/ios”

NOTE:  if you are using NPM/NPX as opposed to ionic, see my other note for similar commands: https://confluence.oraclecorp.com/confluence/display/~ayotunde.itayemi@oracle.com/Phaser3+and+IONIC+on+NodeJS%3A+Game+Development

—- IN ORDER to build the iOS version of the game code, either run “npx cap open ios” from the project top-level folder, OR launch Xcode, then  open the project by selecting the App sub-folder  e.g., ~/scavenger/ios/App). Once the project is loaded, click on the top-level “App” in the “tree’ to the left of the IDE, then click on “Signing & Capabilities” tab in the main section of the IDE, you will need to select your team (you have to login to your iCloud account then select an existing team or create a new one – Xcode will popup the wizard), then also update your “Bundle Identifier” accordingly. Mine is “com.itayemi”. The default of “io.ionic.starter” or “org.cocoapods.Capacitor” will cause the project build to fail since it does not exist in your iCloud config by default). 
aitayemi@aitayemi-mac scavenger % export LANG=en_US.UTF-8
aitayemi@aitayemi-mac scavenger % ionic cap open ios
aitayemi@aitayemi-mac scavenger % npx cap open ios

NOTE: enable “Developer Mode” (and then under it, enable “USB Debugging”) on your real/physical Android device (“Settings” -> “About Phone” -> tap 5 times on the “build number” field to enable “Developer Mode”).
If your physical Android device doesn’t automatically appear in the available devices list in the Android Studio IDE after you connect it via your USB cable, you can click the “devices” drop down and select “Troubleshoot Device Connections” which gives you a “Rescan devices” button. My test android device had some issue with its power port so I have to wiggle the cable a little to get Android Studio to detect it)

References:

https://www.cyberithub.com/install-ionic-framework-in-linux-rhel-centos/
https://gamedevacademy.org/creating-mobile-games-with-phaser-3-and-cordova/
https://medium.com/swlh/easy-peasy-setup-of-a-phaser-3-project-with-ionic-fb4f4dc01625
https://www.tomspencer.dev/blog/2017/05/29/a-guide-to-installing-cordova-on-your-mac/
https://cordova.apache.org/docs/en/10.x/guide/platforms/osx/
https://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html
https://ionicframework.com/docs/v1/guide/installation.html
https://github.com/nodejs/help/wiki/Installation
https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e
https://vitux.com/how-to-install-android-studio-on-centos/ and https://developer.android.com/studio/install
https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
https://phaser.io/phaser3/gettingstarted
https://www.joshmorony.com/create-native-html5-games-with-phaser-and-capacitor/
https://github.com/joshuamorony/phaser3-typescript-webpack-capacitor.git
https://guides.cocoapods.org/using/getting-started.html#installation
https://github.com/ourcade/phaser3-ionic-example
https://wpbeaches.com/installing-node-js-on-macos-big-sur-and-earlier-macos-versions/
https://www.knowledgehut.com/blog/web-development/install-angular-on-macos
https://www.zeolearn.com/magazine/setup-angular-mac
https://vuedose.tips/build-a-game-in-vuejs-with-phaser
https://www.freecodecamp.org/news/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-bdc94719135/
https://ionicframework.com/docs/cli/commands/serve

Leave a Reply

Your email address will not be published.