iOS App creation tutorial for MZ/MV (xcode 12)

mvstone

Villager
Member
Joined
Sep 3, 2020
Messages
19
Reaction score
9
First Language
JP, EN
Primarily Uses
RMMV
Hello, thanks to all the great minds we've figured out how to deploy MZ/MV project to iOS devices.
I especially would like to thank
- MiltonSSR for kicking off the discussion
- BreakerZero for giving me hints on initial steps
- HoofedEar for many many many tests with me
- yymess for solving the tap issue

Now for the actual program!

Prerequisites:
You will need a RPG Maker MZ/MV project, a Mac, an iOS device, and xcode 12. The process is tad different for xcode 11. If you absolutely have to use xcode 11, please refer to the original threads.
Also, be sure to get yourself an Apple Developer signing certificate if you want to test or distribute on actual iOS devices.

Process:
Step 1: Export your game

  • Under File menu, select Deployment. Make sure to use Web as the platform
Step 2: Open xcode 12, and create a new project
  • For template, select iOS from the top, and App from Application section.
  • Enter your product name (we use newmzproj as an example)
  • Select your Apple Developer ID for Team
  • For Organization Identifier, enter your own domain name (if you have any) in reverse. For example, if I have iloverpgmaker.com, I would enter com.iloverpgmaker
    • This will create unique identifier for you - so make sure you use something unique to YOU.
  • For Interface, select [Storyboard]
  • For Life Cycle, select [UIKit App Delegate]
  • Language, [Swift]
  • You can untick Include Tests
  • Could tick Use Core Data but needs further investigation/understanding**
    • RPG Maker uses localforage to store data when running under iOS
    • I am not sure if the locally stored data will be persistent after an App update

Step 3: Modify the code and create a WKWebView
  • Once you have your project created, you should see ViewController.swift on left panel. Open the file.
  • There should be around 20 or so lines of codes. Replace with following codes.
Swift:
//
//  ViewController.swift
//
//  https://forums.rpgmakerweb.com/index.php?threads/ios-app-creation-tutorial-for-mz-mv-xcode-12.128674/

import UIKit
// Add WebKit
import WebKit

// Add WKNavigationDelegate, WKUIDelegate for navigation and ui delegation
class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

    var webView: WKWebView!

    // This gets called when loading the WKWebView
    override func loadView() {
        super.loadView()
   
        webView = WKWebView()
   
        let webViewConfig = WKWebViewConfiguration()
        webViewConfig.dataDetectorTypes = []
        webViewConfig.allowsInlineMediaPlayback = true
        webViewConfig.mediaTypesRequiringUserActionForPlayback = []
        webView = WKWebView(frame: view.frame, configuration: webViewConfig)
        webView.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
   
    }

    // Called after the WebView was created
    override func viewDidLoad() {
        super.viewDidLoad()
   
        let htmlPath = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www")!
        webView.loadFileURL(htmlPath, allowingReadAccessTo: htmlPath)
   
        webView.navigationDelegate = self
        webView.uiDelegate = self
        view = webView
    }
   
    // This is to allow JavaScript Alert() for debugging
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        // alert
        let alertController = UIAlertController(title: "", message: message, preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler()
        }
        alertController.addAction(action)
        present(alertController, animated: true, completion: nil)
    }
}

Step 4: Import MZ/MV game
  • Right click the ViewControllwer.swift on the left panel
  • Select Add Files to "newmzproj"... from the menu
  • Select your games www folder and hit Add
    • Make sure to tick Copy items if needed
    • Select Create folder references
  • Your www folder should be same level as ViewController.swift file
Step 5: Allow MZ to start without focus (can skip for MV projects)
  • From left panel, navigate to www > js > rmmz_managers.js
  • Around line 2107, there should be SceneManager.isGameActive function. Modify the code to skip the check on focus.
JavaScript:
SceneManager.isGameActive = function() {
    return true;
   
    // [Note] We use "window.top" to support an iframe.
    try {
        return window.top.document.hasFocus();
    } catch (e) {
        // SecurityError
        return true;
    }
};

Step 6: Tune-ups
  • Add a custom iconsto your app!
    • Click on Assets.xcassets from left panel
    • Select AppIcon
    • Just drag&drop files with right size here!
  • Make it landscape only (force side view on ios)
    • Click on your project name from left panel (the most top one)
    • Check the appropriate settings from Device Orientation
      • If you want to force side, tick Landscape Left and Landscape Right

That's all! Hope to see many awesome games on AppStore :guffaw:
Happy coding :rock-right:
 

HoofedEar

Veteran
Veteran
Joined
Aug 27, 2020
Messages
37
Reaction score
5
First Language
English
Primarily Uses
RM2k3
Works perfectly! Thanks so much for writing this up!
 

Lee Sang

Sang Hendrix
Veteran
Joined
Jun 7, 2012
Messages
161
Reaction score
245
First Language
Vietnamese
Primarily Uses
RMMV
I received a blank screen on starting the emulator up. There was a loading icon running and it became just black.
 

DevByDane

Villager
Member
Joined
May 30, 2021
Messages
8
Reaction score
0
First Language
English
Primarily Uses
RMMZ
I received a blank screen on starting the emulator up. There was a loading icon running and it became just black.
Same here. Followed the steps exactly. Just a hunch but it may have to do with MZ not having a 'www' folder.
 

DevByDane

Villager
Member
Joined
May 30, 2021
Messages
8
Reaction score
0
First Language
English
Primarily Uses
RMMZ
Apologies for posting twice. I was at least able to figure out how to get the game to show. In the swift code change 'www' to whatever the name of the project (I don't think mz deployment changes the name of the project to www). But I have two issues now. One is that when you make the build, the screen is still white. What I have to do is refresh the app. A second and bigger problem is that it's very laggy. Pretty much unplayable. I'm still trying to figure this out for anyone who is interested.

EDIT: There's a third problem too. Music doesn't play for some reason. I hear sound effects but no music.
 
Last edited:

mvstone

Villager
Member
Joined
Sep 3, 2020
Messages
19
Reaction score
9
First Language
JP, EN
Primarily Uses
RMMV
Sorry I've been away from this, but if I remember this correctly it won't run on the emulator. You need to test it on the actual device (connect via lightning cable)
 

Latest Threads

Latest Posts

Latest Profile Posts

I kinda spent the day having my own little gamejam and came up with this Catastrophe!

GZOq45s.png
Have Defeated Enemy Join Party as Actor, Show Passage Status, & MZ-Chan Art | RPG Maker News #107

My outfit at Metrocon. It was fun.
Manafinder got featured in an Upcoming Indie RPGs video alongside other great RPG Maker (and not RPG Maker) games!

Frostorm wrote on Pharonix's profile.
Hey bro, hmu if you're around...I really need your help. >.<

Forum statistics

Threads
113,624
Messages
1,076,281
Members
147,638
Latest member
Zachimera
Top