I found wonderful guidelines on twitter from @AlanCrevon about make pico8 run on iOS. I write this post in case I forget how to do it. So, I can use it as a reference.

F.Y.I. I used OSX for this export.

For this article, I use my game called “Pop-a-balls” that I made last year. These are steps for export pico8 game in HTML.

1. Open  pico8 and type “load  pop.p8” for loading game into pico8.
2. Type “export pop.html” for exporting game in HTML format. It will generate 2 files. (pop.html and pop.js)
3. rename pop.html to index.html

Before we add HTML into “Capacitor“. We need to make sure that OSX already has all dependencies.
1. Cocoapods (https://cocoapods.org)
2. NodeJS and NVM. (https://nodejs.org/en/) Install “NodeJS” will automatically install “NVM”. (Note to self: Don’t waste time search for how to installing NVM.)

1. Create a folder for the project. I create a folder name “pop“.
2. Create a subfolder inside the “pop” folder and named it “www“.
3. Move game files that we exported from pico8 (index.html and pop.js) into the “www” folder.
4. Open “terminal” and navigate to the “pop” folder.
5. We need to generate a “package.json” file by typing “npm init“. It will start asking questions for package.json content.

package name: (pop) pop
version: (1.0.0)
description:
entry point: (index.js) ./www/pop.js
test command:
git repository:
keywords:
author:
license: (ISC)

6. After finish answer the questions. It will generate the “package.json” inside the “pop” folder. Next step will be installing “Capacitor“

In this step. I just follow the “Capacitor” manual and everything works. (https://capacitor.ionicframework.com/docs/getting-started)
1. Currently, we already navigated into “pop” folder.
2. Type “npm install –save @capacitor/core @capacitor/cli“. It will install something and create a “node_modules” folder and “package-lock.json” file.
3. Type “npx cap init” and It will ask questions for “Application name” and “Bundle identifier“.
4. Type “npx cap add ios” for generating iOS project.
5. Type  “npx cap open ios“. It will open xcode and project ready to run.

When tap and hold the on-screen controller. It will show transparent blue layer on top of the game layer as selecting text.

How to fix:

1. Open “CAPBridgeViewController.swift” file.
2. Go to function
public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)

3. Add this code inside the function.

public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    CAPLog.print(“⚡️  WebView loaded”)

    let javascriptStyle = “var css = ‘*{-webkit-touch-callout:none;-webkit-user-select:none}’; var head = document.head || document.getElementsByTagName(‘head’)[0]; var style = document.createElement(‘style’); style.type = ‘text/css’; style.appendChild(document.createTextNode(css)); head.appendChild(style);”

    webView.evaluateJavaScript(javascriptStyle, completionHandler: nil)

  }

Solution from (https://stackoverflow.com/questions/48467723/how-to-disable-user-selection-in-a-wkwebview-in-swift)

I added code for reloading the web view when comeback from the background.

1. Go to “CAPBridgeViewController.swift”
2. Add function for reloading web view.

public func reloadWebView(){

        webView?.reload()
}

3. Go to “AppDelegate.swift” and add code inside “applicationWillEnterForeground()”

func applicationWillEnterForeground(_ application: UIApplication) {
   let vc = self.window?.rootViewController as! CAPBridgeViewController
    vc.reloadWebView()
}