HTML5 to native Apple App Store / Android Google Play in one click with Cocoon.io

When you want to publish your HTML5 games on the most popular mobile stores, like Apple App Store or Google Play, you have two main choices: Ludei or Cordova.

They are wrappers which basically crate a virtual environment where HTML pages and JavaScript run like we are used to see in our browsers. This way you can easily make your HTML5 game (which is all in all a series of JavaScript scripts) be transformed into a native app, which actually is a native virtual environment where your JavaScript runs.

If you think you just have to run a couples of command-line instructions to make things work, you are wrong.

In order to create your apps this way, you will need to install – and keep updated – on your computer both Android Studio and XCode.

Having both these tools installed on your computer – which should be a Mac since XCode is not available on Windows machines – is the best way to have complete control of your settings, but has the drawback of having to deal with updates, virtual devices, and a series of things which can be avoided with cloud compiling.

Cocoon.io shouts on its home page you can do it in one click, becaise it provides all the tools and services to build awesome native HTML5 apps and games with a simple workflow and all the power of Cordova.

I tried the service and… they are right. This is the project page of Ladderz, the game with the available source code at this page.

The same game which you can find where I give the source code has been zipped and uploaded to Cocoon.io, and after a couple of minutes I got the .apk and .ipa files ready to be published on their respective stores.

Providing a complete step by step tutorial about the process of conversion is beyond the scope of this post and will be analyzed during next posts, because I want to jump straight to the main question people ask when dealing with HTML5 and mobile phones. PERFORMANCES, PLEASE.

You can download the Android Ladderz game and see it by yourself or even better you can test your own projects installing the Developer app on your devices and play with it.

The developer app is a mobile native app to ease the development and debugging process of a Cocoon project. This application is created in the project settings and it will have the same configuration as the project has at that very moment: plugins, icons and splashes and preferences. It will allow the developer to test the source under the same circumstances the final compilation would use.

I used Cocoon.io for the porting of Ladderz for both Android and iOS devices and I was able to compile them and add one plugin in a matter of minutes. It took me more time to take the screenshot when it came the time to submit the game to the stores – I am serious.

I made everything on an ordinary Windows computer with no kind of any SDK installed, thanks to the power of cloud compiling.

Obviously this comes with a price.

I am using the free plan which allowed me to completely manage Ladderz game – with plugins if needed – and lets me have two projects simultaneously… this means you can delete your old projects (which you can create again if needed) to make room for new projects, this way the real limitation would br the 50MB max project size, which can be raised to 250MB – with 10 projects simultaneously – for as low as $8/month, which is the plan I recommend to start with.

Well, that’s all at the moment, I found Cocoon.io useful, got my app published and everything worked like a charm, so give it a try and let me hear your thougts.

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

214 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
// 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