Hype - How To Play

Ken and I have been struggling with the problem of how to teach people to play our games.  Most of our games are fairly niche, and we would like to broaden their appeal to people who might not know how to play.

We wanted something that would accomplish the following goals:

• Quickly teach the players the basics of game play
• Look integrated into the app
• No download or streamed content
• Measurable
• We don't want to inflate the App size too much
• Something we can create without too much custom programming

What we ended up with was a how to play integrated tutorial that was implemented with an imbedded WebView that plays back HTML 5 generated via Hype.  That was a mouth full.  Good thing we have a video showing it in action:

Hype

Using Hype, you can create HTML 5 web content with animations and interactive content.  The best part is it creates really small output as it just requires the art assets and some generated javascript to control the animations.

There are just a view basic types of object you can use in Hype such as Box, Text, Button, ...

I wish Hype had Arrows and other nicer callout objects build into it.  However between the art assets I already had and using Snagit for the other assets, I was able to put together what I needed.

I was actually able to simulate gameplay just by using these basic Hype elements and its Key framing capability.  It only took one evening to finish the Hype project.  I thought about using something like Camtasia to record a video of some of these parts as opposed to rolling the play animations by hand.  However, I wanted the output really small and it wasn't that hard to simulate the effects I needed.  However, given you can embed video in Hype it would be interesting to try it with embedded video clips.

HTML

You can easily generate the HTML assets for the Hype project.  It just produces a simple "main" html file and a folder containing the Javascript, Images, and other resources needed to run the project.

Given this is just HTML, you can even upload it to a website and interact with it directly in a browser:




We just took these generated assets and added them to our iOS project so they would be built into the resource bundle.  If you do add it to your project, be sure to include it as a folder reference so xcode will preserve the folder layout in the resource folder.  Otherwise, it will get flattened into a single folder which could cause issues.

Loading WebView From Resource

You load resource based files into the WebView just like you would load any local file.  Here is some example code that loads the above example:
    NSString     *howToPlayDevice = [FLUtil iPad] ? @"iPad" : @"";    NSString     *resourcePath    = [[NSBundle mainBundle] resourcePath];    NSString     *howToPlayPath   = [NSString stringWithFormat:@"%@/html/HowToPlay%@.html",                                               resourcePath, howToPlayDevice];    NSURL        *url             = [NSURL fileURLWithPath:howToPlayPath];    NSURLRequest *requestObj      = [NSURLRequest requestWithURL:url];    [self.howToPlayWebView loadRequest:requestObj];

One final tip, make sure the canvas in Hype is the same size as the WebView so it fits perfectly with no scaling or borders. That's all there is to it.  

Measurable

One of the requirements was for us to be able to measure the effectiveness of this effort through Flurry.  In order to do that, we need to be able to communicate from the HTML Webview into the Objective-C code.  
Alexandre Poirot has a nice article on How to Properly Call ObjectiveC From Javascript.  I didn't need to use his entire framework, but I used the basic concept to allow Hype's Javascript to be intercepted by the WebView's delegate.
In Hype, I setup a Javascript function to post to a special URL that can be intercepted by the shouldStartLoadWithRequest UIWebView delegate.  

I used a custom URL scheme called "howtoplayscene" and passed Hype's current scene name so I can tell what scene the user is viewing.  By doing this in an iframe that we create and then destroy it so the user doesn't see anything.  Plus, we can use the same HTML for the embedded WebView as well as a regular browser.  Although, there won't be any tracking when running in a regular browser.
Once the javascript is in place, each scene can then be configured to call the trackHowToPlayCreentScene function when it's loaded:

That's all there is to it on the Javascript side.   The Objective-C side is fairly straightforward:

With this in place, we will get custom events in Fluury that look something like:

• HowToPlay.Scene.Goal
• HowToPlay.Scene.Tool Bar
• Show HowToPlay.Scene.Step 1
• Show HowToPlay.Scene.Step 2

We will be able to track how many users make it through all they steps and which percentage of users drop off at any given point in time.  Hopefully, with this information we can help make the tutorial better and find where and if users are getting stuck.  We will also be able to correlate information such as the percentage of people that complete the tutorial that go on to purchase.

The other little trick I use, as seen above, is when the user complets the How To Play tutorial.  I have the HTML navigate to "http://www.fivelakesstudio.com/Five_Lakes_Studio/PicrossHD.html".  I picked that URL so when the user hits the done button they will be taken to the webpage for PicrossHD, when run from an external browser.  However, when run from within the App, we close the UIWebView.

Conclusion

This will go live soon, and we are excited to get this in the hands of our new users. I hope we can teach more people how to Play Picross HD and hopefully they will like it.

Please feel free to follow me on twitter at @fivelakesstudio. I would love to hear about your experiences on how to onboard people to your app. Let me know if you found this useful, and especially if you now understand how to play Picross HD.

Thanks for reading and be sure to visit us at Five Lakes Studio. I should mention that I also work for Techsmith, the makers of Snagit and Camtasia.

Engage Users In-App

Ken and I have been trying to figure out how to better engage and communicate with our users.   The AppStore sure doesn't make it easy.

We have tried to use GetSatisifaction and of course there is classic e-mail, but they both have the problem of discoverability.  We don't have a good spot in App to make those resources available without disrupting the user experience.  By forcing users to leave the app and visit our website to communicate with us, we averaged only a few contacts a month.

We also prompt for star ratings within the app and that has been helpful in getting reviews, and we appreciate and read the review feedback.  However, it's really frustrating when you can answer the persons question or problem with no way to actually get the answer to them.

I happened to find a nice solution to this problem.  The Appsfire App Booster SDK for iOS and Android is designed to help with in-app engagement.  It's still in Beta, but we have been using it for Picross HD, and its been great.  We now receive feedback a couple times a day from our users, and we are able to respond back to them directly.

Getting Started

First off, we carved out a little space in the UI to put in a messaging button and indicator.  Appsfire has several recommendations for this so it has enough visibility within your app.  We chose to put it at the top of our main puzzle screen to the right of our App name:

Message Button With Message Badge

They even include a little helper class that takes care of creating the badge for you.  We chose to do a custom integration because we have a game style UI.

We hooked up notifications for message changes so that badge can be updated correctly, and when the little message bubble is pressed we launch the Appsfire messaging interface.  That's all you have to do on the client side and you can start engaging your users.  I would be happy to share the code we use for this, just send me a tweet.

In-App Messaging

Appsfire includes a built-in messaging engine.  Your users can send you messages, and you can reply to them directly within the app.  

They have options for changing the color scheme, but the default color scheme worked well for us.

The UI is also supposed to be localized in several languages including German and Japanese.  However, we were have never able to confirm that it is indeed localized.  I can say that we have many Japanese users that have sent us feedback through Appsfire.

The e-mail field is optional.  We have found most users do provide an e-mail address.  When the feedback is sent, you will get an e-mail that allows you to respond either within the app or via an e-mail (assuming the user provided an e-mail address).

We usually try to answer the user via the "Notification Wall" aka in-app.  However, if the response is long or under special circumstances we will reply via e-mail.  For example, one user felt strongly about an issue and vowed to never launch the app again.  I wanted to thank the user for their feedback and reach out to them.  Doing it in-app wouldn't have been effective assuming they weren't going to open the app again so I used e-mail.  The user thanked me for reaching out to him and hopefully he gave us another chance.

What's New

Another feature we use is What's New.  The Appsfire server will automatically detect new App releases, and it can automatically notify your users of the update.

Tips and Tricks

We are planning to release a series of tips and tricks for our users.   So far we have released one tip, and it has been well received.  The Appsfire portal provides metrics on views and clicks for each message so you can measure their effectiveness.

We think this is a great way to expose users to features or capabilities of our app that they may not know about.   When creating custom message you can also specify the message in different languages such as German and Japanese.

Link to Web Content

In additional to static message, you can link to web content either displayed within the app or via the Safari app (on iOS).  We use this for inviting people to join your twitter account and are experimenting with other creative uses such as linking to a youtube help video.

App Promotion

App promotion is another option available via the Appsfire SDK.  We use it in Picross HD to promote Kento and vice-versa.

When the user clicks on an App promotion message they are taken directly to the AppStore.

Badge Updates on Launch Pad

A new feature they just added was the ability to update the badge on the Launch Pad without having to run the App.  This is a great way to help pull people back into the app.

Conclusion

I highly recommend the Appsfire App Booster SDK, and it is in Beta!!  It still has some rough edges, but even in its Beta form I consider it a must have for Picross HD because of how it allows us to connect with our customers and create a more engaging experience.  


Here are some of the improvements I hope they make as they continue to develop the SDK

• The web portal for managing messages is a little rough around the edges.  
• Setting the start and end dates for a message didn't work as expected.
• It was challenging getting push badge notification to work and needed Appsfire support.  I expect this will get better.  It desperately needs debug tools.
• Doesn't work behind some firewalls
• The in-app messaging interface doesn't work behind some firewalls
• Feature Request:  Only the welcome message allows you to provide "longer" text without having to use a web page.  It would be nice for tips and tricks to have a custom message with longer text.
• Feature Request: I would love the ability to time message deliver based on days since installing the app (or other in-app usage).  Right now all messages are date/time delivered.

The team over at Appsfire is very professional and helpful, and I can't say enough nice things about them and their offering.

Please feel free to follow me on twitter at @fivelakesstudio.  I would love to hear about your experiences connecting and engaging with your users.    Let me know if you found this useful.

Thanks for reading and be sure to visit us at Five Lakes Studio.

- Tod

Mobile Website (dudamobile.com)

OMG.  Five Lakes Studio is a mobile casual game company, but we had no mobile website.  What's even worse is a majority of our traffic is coming from mobile devices (surprise!!!):

How did we get here?

We don't get much traffic to our website, and we don't want to spend a lot of time on it.  We focus our business on our users and our apps.  For example, we just integrated AppsFire's AppBooster SDK into Picross HD so users can contact us and we can communicate with them directly within the App.  I plan on writing a blog post just about it.  So far the results are looking promising.  However, you have to have a website.

While we could hand code HTML, we ended up using iWeb.  Our pages are mostly static, and we wanted something that was fast to create and gives us creative control (not ridged templates).  When we first launched Euchre HD we had some user complaints because they didn't understand how to setup Game Center.  I was able to quickly (minutes) create and post visual step by step instructions on how to do this by using iWeb and Snagit.    

The downside with iWeb is it doesn't help with the creation of a mobile website, and the HTML produced isn't well suited for mobile.  Also, I'm not sure what the future of iWeb is going to be.  I think it is an amazing tool and I wish Apple was doing more with it.

What are we to do?

I started searching for a mobile website creation tool.  I ended up finding an interesting online/hosted solution from dudamobile.com.  They have an ad supported model and a paid model  ($9.00/month).  The paid model also supports connecting to your domain so now we have m.fivelakesstudio.com.

Getting Started

Its very easy to get started.   Dudamobile walks you through setting up a new site.  You can pick from several themes.  The nice thing is you aren't locked into a theme.  During editing you can customize the page headers, footers, background, colors, layout, and so much more.

You can interact directly with a preview of a page and choose from many highly customizable interesting drag and drop widgets:

My favorite widget is the Image Slider.  You can add up to 3 images in a slider style control.  You can see it above in the preview (currently showing Kento).  

Page Import and Syncing

One of the nice things about dudamobile is that it can import and sync to your existing website.  When you add a page, you can give it the URL to one of your existing pages.  It will then important the page. I was surprised this even worked for iWeb sites.  I did have to do some basic cleanup and reformatting on the imported content.  It was mostly deleting extra stuff I didn't want in the mobile site.

I haven't tried syncing content.  Most of the content we have is fairly static so I turned it off.  Plus I am doubtful syncing will work well with iWeb, but I might be surprised again.

Support

I was impressed with the dudamobile support staff.  I had some issues getting the slider to work the way I wanted.  They where very responsive and helpful.

Conclusion

It has only been live for about a week and so far I am pleased with how this turned out.   I still need to setup redirects on all the web pages to redirect to the mobile website.  Currently, only the main page has a redirect.

Please feel free to follow me on twitter at @fivelakesstudio.  I would love to hear how others have solved their mobile website needs.

I hope this was useful.  Please visit our site and try out our games for iOS.