Turn your HTML5 games into native iPhone apps in a matter of minutes with CocoonJS

We are using a lot the “cross platform” term when we design a game once and make it run on several devices, each with its own browser. What if you want to turn your HTML5 game into a native iPhone – iPad app?

Today I am showing you how to use Ludei‘s CocoonJS to start with an HTML5 game and end with an iOS native app.

If you want to know more about CocoonJS or other ways to port your HTML5 games into iOS, check my blog posts Turn your HTML5 games into native mobile games with CocoonJS which explains how to run your games in an iOS wrapper app, and From PuzzleScript (or any other HTML5 game) to native iOS (or any other mobile device) using FREE Adobe PhoneGap Cloud service which shows you how to create iOS apps using Adobe PhoneGap.

So, once you created an account with CocoonJS, let’s create a new project from this page:

You will be asked to fill some basic information such as game name, scaling, orientation, and above all the Bundle Id, which must be unique so it’s recommended to use the reverse domain name followed by game name.

Upload the zipped project, select which devices you want to compile it to, then select the wrapper – I found WebView+ to grant the most compatibility – the compile the project.

While the project is compiling, perform your best “everything will be fine” dance. If you are a long time programmer, you should have a “everything will be fine” dance. I have mine since I started burning my first CD-R at 2X speed. 8 out of 10 did not burn correctly, so I had to create an “everything will be fine” dance to wish me luck. But I am sure you know what I mean.

With CocoonJS everything always will be fine, so once you receive an email saying your project has been successfully compiled, go back to your dashboard and download it.

If you are using a Windows computer, that’s where you should stop. Don’t even unzip it or in some cases you won’t be able to complete the process. It happened to me, and to a lot of people according to forum discussion you can find around the web.

Once you have a Mac, unzip the zipped file and open the Xcode project. Obviously, since we are about to create iOS apps, you’ll need Apple Developer keys, certificates and provisioning profiles. If you are new to this, there’s a detailed guide at the post Creation of an iPhone App with Flash and without a Mac (for all Windows lovers). It’s a bit dated but still absolutely working. You will also need to have Xcode installed on your Mac

Once you have your project launched in Xcode with all certificates in their own place – don’t worry about it, Xcode will guide you if you did not install them before you try to compile – plug a device to your Mac and select it. Then you can choose “Archive” to create an .ipa file or “Run” to make it run directly in your device, as a native app.

And that’s it, my reskin of A jumping Block game is running smoothly on an iPhone 5.

Expect it to Apple App Store in a few days, with some more features like ads, and I’ll show you how to monetize your HTML5 games once turned into native apps.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers