HTML5 Game Development
   
  • HOME
  • News
  • Tutorials
  • Engines
  • Demos
  • Tools
  • Partners
  • Mobile HTML Game
  • Guess The Celebrity
  • About us

iOS 7.1 – minimal-ui is anything but minimal for HTML5 game developers

This is a guest post from Odobo CTO Peter Mareš.

As the developer program for real-money gaming, we assess the impact that any new software update is likely to have on our developer community. The positive news with iOS 7.1 is that this version presents a great opportunity for all HTML5 game developers and full screen app producers.

The most exciting addition is a modification to how Safari handles web apps: it makes development easier, improves the look of games and enhances the player experience. Better still, it is easy to implement. By updating a small piece of code in our Game Development Kit (GDK), every game automatically updated to take advantage of these improvements.

In this article, we cover some iOS 7.0 history, prior solutions, and the future ahead with 7.1.

iOS 7.0 Safari: a brief history

In iOS 7.0, Mobile Safari hid the address bar and changed the behaviour of both full-screen browsing and full-screen mode. Although the idea behind full-screen browsing on iPhone was great, it was originally designed for scrollable webpages, not full-screen web apps such as media players and games. For gamers and developers this presented more of a challenge than with the previous version of iOS.

Although the changes impacted both device orientations, landscape presented the greatest need for a workaround: if a user tapped the top or bottom of the screen, the browser bars would activate, reducing the screen real estate, interrupting and obscuring the game or application. To complicate matters further, it was not possible to launch the game in full-screen mode.

iOS 7.0 Safari: a temporary solution

Since no browser event was fired when the browser bars appeared, workarounds had to poll the visible browser area for each frame (we used requestAnimationFrame). This identified when browser bars were both visible and unsought. Once detected, the content was resized to allow scrolling, disabled the app, and presented a ‘swipe up’ message to the user.

Once the user swiped up, the app would detect that the visible browser area had been increased, re-enabling and resizing the content back to full-screen.

This provided a solution; however, it was a messy hack.

On the design side, developers had to change their game design practices to avoid the top and bottom areas (each ~100px high) for any interactive elements to prevent users from triggering the bars. While this reduced the frequency of which this feature occurred in apps, it still presented a user experience challenge.

To provide a more natural experience to players, we provided direct feedback to Apple in hopes of creating web app development extensions.

Safari – full-screen ahead

iOS 7.1 arrived with a little-publicised gem for every HTML5 developer: minimal-ui.

In the iOS 7.1 release notes, under Safari, you will find the following:

A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.

For example, use <meta name=”viewport” content=”width=1024, minimal-ui”>.

This small addition literally changes the game. Simply adding minimal-ui to our viewport’s meta tag (something automatically handled by the GDK) now solves the challenges presented in iOS 7.0 with one easy step – and being native, it performs exceptionally well.

Now, running HTML5 full-screen apps on iOS 7.1 looks and feels great without the need for complicated workarounds sitting behind the UI.

Apple has also gone a step further and removed the ‘dead-zone’ at the bottom of the display, which means that users can only activate the browser bars by tapping the top of the screen. When this happens, the bars appear, with a darkened overlay covering the app below. This provides the user with a true native feeling of being ‘out of the app’. Simply tapping in the content space will intuitively bring back the full-screen app.

So whatever you feel about iOS 7.1 in general, for gaming enthusiasts and HTML5 developers, this new update is one we’re applauding.

About Odobo

This is a guest post from Odobo CTO Peter Mareš.

Odobo is the HTML5 games development program and content Marketplace for the regulated real-money gambling industry. The Odobo Game Development Kit (GDK) provides game developers with a framework for their game client production and access to state-of-the-art technologies to assist in their development of regulatory-compliant HTML5 games for real-money play. Odobo games are made available to participating licensed gaming operators via the Odobo Marketplace – the B2B ‘app store’ for the gaming industry. Developers earn royalties based upon the revenue generated by their games and access additional affiliate commissions when they market their games and drive new players to the gaming operators. Developer’s recently added to those working on Odobo’s platform are: AppleJack Gaming, Wild Game Reserve, Core Gaming, Trimark, Red7 and Probability Jones, with others to be announced soon.

Odobo, based in Gibraltar, is licensed and regulated by the Gibraltar Gambling Commission. The company employs over 80 staff.

 

Share List

You might also find this interesting:


  1. Odobo: HTML5 Game Development platform for the regulated gambling industry Odobo has launched an HTML5 powered Game Development Kit combined with a royalty portal to allow you to create HTML5 Games for the Gambling industry. Odobo is targeting the regulated,...

  2. The Great HTML5 Mobile Gaming Performance Comparison This Post from Scirra, the makers of Construct 2, is liquid gold for HTML5 Game Developers targeting mobile (which is probably all of em) – it shows the performance of...

  3. iOS 6 Mobile Safari – HTML5 Game Developer upgrades A nice write-up on what HTML5 Devs can expect from iOS 6. Big ones for HTML5 game development: Web Inspect/Remote debugging (Yay!), Web Audio API, Full Screen view in Landscape...

  4. Survey: 75% of game developers using or planning to use HTML5 GameZebo has details about a survey by Evans Data did of 1200 developers worldwide: Conducted by Evans Data, the survey questioned 1200 developers worldwide at the end of last year,...

  5. Spaceport.io report shows iOS destroys Android in HTML5 performance Spaceport.io, the GPU accelerated mobile game engine that allows you to build games using JavaScript with a Flash-like API has released it’s latest perfmarks, Spaceport’s HTML5 performance-benchmarking suite that shows...

HTML5 Game Dev Tutorials

License HTML5 Games

Are you a company looking to license HTML5 games? We recommend MarketJS.com, a B2B platform for licensing games.

MarketJS has over 300 HTML5 games for licensing. They also provide additional services such as game reskin, custom development, and white label portals.

Html5 Game Development


Follow @GameDevHTML5



WHAT’S NEW

  • Game Localization For Food Delivery App

  • HTML5 Games in Guest Room Tablets

  • What’s New in Phaser 3.50

  • Particle and Sprite Editors in Babylon.js 4.2

  • Healthcare Industry HTML5 Games



NEW DEMOS

  • Vertical Endless Runner Prototype

  • Particle and Sprite Editors in Babylon.js 4.2

  • Song Maker in Google Experiment

  • Phaser 3 Experiment for Drawing Cards

  • HTML5 Game for a Recycling Campaign


ENGINES

  • GDevelop – Free and Easy HTML5 Game Engine

    If you are looking for a free and easy HTML5 game engine, check out GDevelop. This game creator is designed to be used by everyone, with its no-code, open-source, free, …Read more

  • Phaser 3 Game Object Pools Tutorial

    Memory allocation inside update loops often causes framerate problems in real-time gaming. One of the best solutions to this is to use Object Pools in Phaser 3. An Object Pool …Read more

  • Games During The COVID-19 Pandemic

    There so many effective ways to engage your audience with HTML5 games. Here is an example of how to run a game campaign to keep users motivated during difficult times. …Read more

SEARCH OUR ARCHIVES

CONNECT

rss twitter

HTML5 Game Development is proudly run by 3P Solutions Inc

GOT NEWS?

Send new engines, demos, information and tips to hello@html5gamedevelopment.com

MONTHLY MEETUP

In boston? Join us for the Monthly HTML5 Game Development meetup.

BOOKS

We're in the process of writing a few books about game development. Coming soon!

Copyright HTML5gamedevelopment.com