Wrapping – Export Hype HTML to an App 🎁

Photics · December 14, 2020, 1:49am

Wow, I'm glad you feel that way about the app. It's a pretty good app. Since I use it, I've been keeping it updated. Version 1.2 (a minor update) is almost ready for launch, I'm still debating if I should actually go for it.

Here's why I've been thinking about Wrapping...

I've been kicking around the idea of hosting a Hype gaming competition next year. I really like what Apple did for small businesses. I think it would be awesome if lots of people started building games with Hype. Flash is dead, but there isn't a true successor. I think that successor should be Hype. I figure if people start making hit games with Hype, that will attract good attention.

But for that plan to truly be successful, I figure there are three major obstacles...

An easy way to use Hype's Physics engine (matter.js) — I have the PhoticsPhysicsBridge.js sitting on my desktop. I think it's very helpful. I just haven't launched it.
An easy way to convert a Hype project to an App. @MarkHunte has a nice Xcode project, but Wrapping is even easier. It's even easier than that when using the Hype Export Script. This is also ready to go. It's just sitting on my computer.
There are two major issues with matter.js — No Continuous Collision Detection (CCD) and bouncing objects lose momentum.

Unexpected loss of energy in frictionless perfectly elastic setting · Issue #256 · liabru/matter-js · GitHub

By controlling the speed of the elements, you can usually work around CCD. But the Momentum issue, that's blocking two simple game ideas of mine. That's actually how I started off this weekend. I was planning to work on "Bricked". I quickly realized why that project was unfinished.

There are two tasks left to relaunch Wrapping.

Add an option to add the Export Script to Hype
Update the screenshots. (It now has Dark Mode.)

It's not definite, but looking good for a relaunch of Wrapping. Are people still interested in this?

Djon · December 14, 2020, 8:01am

Yes, I would like to update my version. And it would be nice if there’s a Android export as well. So please proceed

Photics · June 17, 2021, 8:48pm

I revisited this issue again, but I'm not sure how the technique I'm using would work with Gradle. Frustrating, but it's the same problem I ran into three years ago. So, the plan is to release the current version — and the Hype Export Script — on Etsy soon. That way, international customers can get a copy of Wrapping.

Photics · June 18, 2021, 1:02am

UPDATE — I still have some more work to do with the listing, such as adding a video and more pictures, but Wrapping is now available internationally.

If you're wondering why this costs $20, it's because the Hype Export Script is included.

Photics · June 18, 2021, 11:28am

Wrapping (Export Script) Video

This thread was started in August 2017. So if you don't feel like scrolling all the way to the top, here's the example video again. The whole process is less than one minute and 17 seconds.

And... AND... there's a part of the video where you enter the “Company Name” and the “Bundle Prefix”. If that never changes for you, then you can manually add those values into the script. That makes the process even faster.

If you already have your Hype project exported, you can use the Wrapping app...

littletonmiller · June 22, 2021, 4:25pm

I bought Wrapping on the App Store in 2018, is there any way to get the Hype (Exporting Script) without purchasing (again) on Etsy?

Photics · June 22, 2021, 8:56pm

Future development is not guaranteed, but the idea is to update the Mac app so it can install the Export Script. However, I was not successful last time I tried this. I do have two fresh Tech Support Incidents to use, and I was considering using one to resolve this problem, but it's fairly low on the priority list. I was thinking of returning to Mac App Store development around the time macOS 12 is released. (That's months away.) I have an idea for Widgets and the other apps might need updating too.

Right now the focus is building up Photics.TV (YouTube channel) so that more people learn about Wrapping and A Book About Hype.

I don't want to throw any promotions right now because people just spent money in the Etsy store.

Chriswhardy · July 3, 2021, 12:38am

Hi all,

This may be irrelevant in this thread however I’m wondering if anyone’s been able to create a native app with save / memory features? I’ve developed a few web apps that use local.storage and also using a MySQL database to load (upload and download) saved information but I’m wondering if there’s another way you can use memory with native apps?

Also, this development looks amazing so thanks @Photics for this! I developed a easy read app a few years ago for people with learning disabilities and it took me ages to work out how to get it all working in Xcode. When I boot up my iMac later I’ll download wrapping to give it a go

Thanks everyone,

Chris

Photics · July 3, 2021, 1:01am

I don't mind. I'll discuss Xcode stuff in this thread.

This is my preferred method. It's so easy. Is there a particular reason that you don't like it?

With the "Widgets" app, I managed to read locally from an SQLite database. I haven't tried it, but from what I've seen, it looks like writing to a Local SQLite database is possible too. I didn't try that because the database is included with the app, so any saves would be blown away with updates. I suppose it would work if I saved the database somewhere outside the app, but localStorage is just so much easier for what I do.

There are two other ideas that I haven't explored either... like iCloud... which Widgets does use. It can add reminders... but I haven't used it to store general app data in the cloud.

There's also something called "Core Data"... but I didn't get very far with that... Core Data | Apple Developer Documentation

I suppose these are good topics for Photics.TV, so if I see people struggling with the same issue I might make a helpful video to solve the problem.

Chriswhardy · July 3, 2021, 3:08pm

Hi @Photics. Thanks for your reply.

I was thinking that as local.storage linked to website date, if the user clears all website data, they would also clear the data within the native app. is this correct? Also, I recently read that apple were having a time limit on how long local storage data is held so I was concerned that this would impact the use within a native app.

I'll check this out. I've done some playing around with building native iOS apps in the past using Xcode and swift (in its very early days) but I've never had the time to re-explore this again.

Thanks for your help with this,

Chris

MarkHunte · July 3, 2021, 7:55pm

Just to chip in

I cannot see any reason why you could not pass info from the wkwebview to the app and then store that data in any of the native app methods of doing so.
Passing the data back should be just as simple.

There are some if my examples on the site that show how to pass back and forth

Djon · July 14, 2021, 10:12am

Hey Michael,
I've just updated the wrapping app. It seems that the sound doesn't work. After scratching my head twice I found out that one needs to add:
wc.setValue( true , forKey: "_allowUniversalAccessFromFileURLs")
below: if #available(OSX ) .
Could you fix that in an update. It's not so nice to need this adding every time.
regards Djon

Photics · July 14, 2021, 10:30pm

I'm not comfortable with that change. While not perfect, sounds work for me without that setting. As an example, "Circles with Grandma" has sounds. Maybe it's something else? Are you doing something special with your sounds? Are you using Howler.js? Are you loading them remotely?

I do think there is an issue with playing sounds. It was a problem when creating the app version of "A Book About Hype". The coconut template would have a problem with audio because of repeating sounds.

Also, once I use Wrapping to setup an Xcode project, I don't use Wrapping to build it again. I usually just update the HTML folder.

If you find yourself making a lot of customizations, you might like the new Hype Extension version of Wrapping... Wrapping – Photics.com ...as that can be customized. You can even add your Company Name and Bundle Prefix to speed things up...

LesUX · March 17, 2022, 8:50am

Is there a way to get the app to open external links?
It's just for a prototype demo. I'm not submitting to the app store. No matter what I do I can't get an external link within the hype document to open. Not sure if it's possible.

Photics · March 17, 2022, 12:21pm

Are you trying to embed an external page or just click a link?

I had a long discussion with "The Eskimo" over at Apple about this.

I don't have Xcode installed right now (I delete the old version when there's a new version.) so this is untested code, but I think this is what you're looking for…

func webView(_ webView: WKWebView,
    createWebViewWith configuration: WKWebViewConfiguration,
    for navigationAction: WKNavigationAction,
    windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil, let url = navigationAction.request.url {
            NSWorkspace.shared.open(url)
        }
        return nil
    }

Basically, WKWebView wouldn't open external links or download PDF / Zips included with the Hype project. So, there's some extra code needed to make that work. I suppose I could add that to main app, but I'm not sure if there's demand for that. I don't want to mess with working code if everyone else is happy.

Has anyone else here had a problem with external links?

I'm downloading Xcode now, so I can check on this thread again tomorrow. HA HA!

LesUX · March 17, 2022, 4:12pm

Thanks for the replay.

Unfortunately, I get an error "Cannot find 'NSWorkspace' in scope". I'd like to just open a link but no code I've found seems to work. I'm not a developer, however, creating this with video editing was very choppy. Hopefully, I can think of something.

Photics · March 17, 2022, 5:25pm

Oh, are you using iPhone or Mac?

Also, where did you add the code? In the ViewController.swift file, there should be a line that looks like this…

class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate {

The code goes in there, just before… override func viewDidLoad() {

Xcode downloaded a lot faster today. So I got it setup and I tested the code. It seems to work as expected.

LesUX · March 17, 2022, 5:40pm

Photics:

func webView(_ webView: WKWebView,
    createWebViewWith configuration: WKWebViewConfiguration,
    for navigationAction: WKNavigationAction,
    windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil, let url = navigationAction.request.url {
            NSWorkspace.shared.open(url)
        }
        return nil
    }

I'm using a mac. To create an iPhone build. I think may have somehow gotten an old version. This is what I have:

import UIKit
import WebKit

class ViewController: UIViewController, UIScrollViewDelegate, WKUIDelegate {

var wv: WKWebView!

override func loadView() {
    let wc = WKWebViewConfiguration()
    wc.allowsInlineMediaPlayback = true
    wc.mediaTypesRequiringUserActionForPlayback = []
    wv = WKWebView(frame: .zero, configuration: wc)
    wv.uiDelegate = self
    wv.scrollView.bounces = false
    wv.scrollView.isScrollEnabled = false
    wv.scrollView.delegate = self
    wv.isOpaque = false
    wv.isHidden = false
    view = wv
}

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return nil
}

var webView = WKWebView()

override func viewDidLoad() {
    super.viewDidLoad()
    let url = Bundle.main.url(forResource: "/html/index", withExtension: "html")
    let request = URLRequest(url: url!)
    wv.load(request)
}

}

MarkHunte · March 17, 2022, 6:03pm

Post related to code to open urls which may help you/people.

Photics · March 17, 2022, 8:51pm

Which version are you using? (Are you using the App or the Script?) I haven't updated it in a while though. Adding support for external links seems like a nice feature to add if I do update it.

Anyway, here's a link to what "The Eskimo" said…

https://developer.apple.com/forums/thread/68427?answerId=199512022#199512022

…that's the iPhone version of the code. It uses "UIApplication" instead of "NSWorkspace".