Step by step guide to create Android native games in HTML5 with Cocoon.io and without Android Studio

As you may know, I used Cocoon.io cloud services to convert my Ladderz HTML5 game into a native Android game. I made the port in less than five minutes without installing any software or SDK by compiling it directly on the cloud thanks to Cocoon.io which provides all the tools and services to build awesome native HTML5 apps and games with a simple workflow and all the power of Cordova. Now it’s time to write a step by step guide about this process. 1 – Obfuscate your code This is very important. Be aware your javascript is not converted into “something else”, it’s just executed into a wrapper which acts like a virtual machine inside your app. So your code will remain exactly as you made it, and although there is no “view source code” in your game, you should obfuscate it. I highly recommend Jscramber, but the free online JavaScript Obfuscator Tool has some interesting features too. 2 – Create your Cocoon.io account Go to Cocoon.io, and choose your plan. I am using the free plan which allows to completely manage up to two projects simultaneously with plugins, with a 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. 3 – Include cordova.js file Go to the official GitHub repository and grab the latest version. Then include it in your project, making your index.html page look something like this:
<!DOCTYPE html&gt;
<html&gt;
	<head&gt;
        <title&gt;ZNUMBERZ</title&gt;
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0, minimal-ui" /&gt;
        <link rel = "shortcut icon" sizes = "256x256" href = "icon-256.png" /&gt;
        <style type = "text/css"&gt;
            * {
                padding: 0;
                margin: 0;
            }
            body{
                background: #202020;
            }
            canvas {
                touch-action-delay: none;
                touch-action: none;
                -ms-touch-action: none;
            }
        </style&gt;
        <script src="cordova.js"&gt;</script&gt;
        <script src="phaser.min.js"&gt;</script&gt;
        <script src = "game.js"&gt;</script&gt;
	</head&gt;
	<body&gt;
	</body&gt;
</html&gt;
This will allow you to use Cordova specific features, like… 4 – Add a deviceready event to start the game Unlike old CocoonJS plugins, Cocoon Canvas+ plugins need to wait for Cordova deviceready event to start working. This event fires when Cordova is fully loaded, so your game will be executed this way:
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    // your game here
}
Now you are ready to make your game be processed by Cocoon.io 5 – Zip your HTML5 game, THE RIGHT WAY Your project won’t work if you zip your project with don’t use the Windows compression, use WinRAR instead, just create a Zip file. If you have a Mac, you can use your default macOS zip utility. 6 – Download Java JDK You will need it to create your keystores, required by Cocoon.io to compile your game. You can download it from this page. 7 – Create your keystores You are going to use keytool to generate your release or debug keystore. Execute the command prompt as administrator, move into your bin directory into your Java/jdk directory then write keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 for your release keystore, or keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 for your debug keystore. 8 – Compile signing section At this time you are readyto upload the keystore along with its passwords Now, you can compile your Android native app, directly on Cocoon cloud

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