mobileFX Coconut2D Studio IDE mobileFX Coconut2D Studio IDE mobileFX Coconut2D Studio IDE mobileFX Coconut2D Studio IDE mobileFX Coconut2D Studio IDE mobileFX Coconut2D Studio IDE mobileFX Coconut2D Studio IDE

Coconut2D Studio IDE

HTML5 and Native Games Designer

mobileFX Coconut2D Studio is an Integrated Development Environment (IDE) for rapid prototyping of 2D Games and Apps. The key feature of this IDE is that a game is automatically compiled as a HTML5 JavaScript WebGL application and as a separate native iOS and Android OpenGL ES application.

It is important to point out that the native applications compiled by mobileFX Coconut2D Studio do not use WebView wrapping technologies; instead, apps are 100% pure native C++ compiled applications that run even on low-spec Android devices where other similar solutions wont even load.

The IDE is full of commodity and modern features such as Project Explorer, Assets Explorer, Code Editor with IntelliSence and debug tools, Debug Panels, Breakpoints Editor, Expression Evaluator, GutHub Integration, JSON Viewer, Image Browser, Properties Explorer, Texture and SpriteSheet Editor and Scene Animation Editor with Timeline, Keyframe and TimeLabel Editing.

Scene Animation Editor implements a Cross-Screen-and-Resolution design feature that spawns across design-time, compile-time and run-time in order to optimize graphics usage. At design-time the Art Director sets a fixed viewport in which Animators must place their assets. At compile-time animations are analyzed in order to derive optimal image sizes from keyframe transformations, with respect to the fixed viewport. At runtime the viewport is proportionally scaled to fit the device's screen size, and images for textures are loaded depending on their calculated optimal size. This method avoids loading images by dpi designation (ldpi, mdpi, tvdpi, hdpi, xhdpi) and ensures that optimal sized image variants are always loaded. The Cross-Screen-and-Resolution design feature also eliminates black edges around the game viewport.

A Coconut2D Project is organized at filesystem level and is partitioned in two top-level folders. A Web Folder that contains the game's assets and source code and a Native Folder that contains a set of automatically generated platform-specific projects: an XCode project for iOS, an Eclipse project of Android, and a Qt project for Mac, Windows, Linux and SteamOS ports. Those projects are generated for compatibility and export purposes and they can be compiled by Coconut2D Studio IDE alone.

By installing 3rd party compilers and SDK such as the iOS Built Environment for Windows, Android NDK, Android SDK and Apache Ant, developers can use mobileFX Coconut2D Studio as a turn-key solution for compiling, code signing and deploying IPA and APK files either directly to iOS and Android devices or to AppStores. An important note for iOS devices is that no Jailbreak is required and developers can compile targeting the latest iOS version and sign the IPA file by using their own code signing certificate.

mobileFX Coconut2D Studio IDE Screenshots

Coconut2D SDK

Open Source Cross Platform App & Game Development Framework

Coconut2D SDK is a set of open source frameworks and libraries for 2D Game and App development. There were three primary objectives set when we first tried to design the SDK:

  1. The SDK should have a single code base - a single programming language, that developers would use to write their games and apps. This programming language should be known to most developers and programs developed with it should run on all platforms, starting from web browsers to desktop computers, tablets and smartphones.
  2. There should be a single graphics surface for developers to use. At a high-level graphics should be resolution and device independent; the developer should never worry about screen sizes, dpi, etc. At low-level the underlying graphics technology should offer hardware acceleration and be available on all target platforms.
  3. The SDK should have at least an Animation Framework for creating rich multimedia content, a 2D Game Framework for developing games, and an Application Framework with UI elements.

The solution we came up with was to assume a HTML5 WebGL Canvas as a virtual platform and JavaScript as the single code base programming language. Then we designed a set of native Device Wrappers that virtualize the HTML5 WebGL Canvas across target devices (desktop, tablets, mobile, etc.). From a developer's point of view the Device Wrappers ensure that there will always be a native HTML5 Hardware Accelerated WebGL Canvas available to program the game on, regardless of the underlying platform (iOS, Android, Linux, Mac, Windows, etc.).

Then we encapsulated all core frameworks (Animation, 2D Game, Apps) inside a Common Runtime Layer (CRL) written in JavaScript. We wanted all apps and games to support complex animations from day one, so we layered the Animation Framework on the base and all the rest frameworks "inherit" from it. For example the Button Class of the Application Framework inherits from the Clip Class of the Animation Framework, where clips can have a Timeline animation with KeyFrames, sounds, etc. Since every single element inherits from the Clip class, it means that every element is a container that can include other clips as well, thus more complex elements can be synthesized simply by joining them.

Next we needed an Execution Context for the games to run. Because of our favor to JavaScript and WebGL we were aware of projects such as Ejecta that blend an OpenGL canvas with a JavaScript VM Engine, but with such hybrid solutions as games get more and more complex, the performance is getting more and more poor and portability hits a ceiling. We were determined to deal with this problem using a Computer Science approach and therefore we developed a JavaScript Compiler that instead of generating byte code it would generate portable C++, which would then link with the native Device Wrappers.

Coconut2D SDK Blueprint Schematic

So, with Coconut2D SDK and IDE developers write their games over CRL Framework Classes in JavaScript by assuming there is a HTML5 WebGL Canvas available, and their games run both on HTML5 Browsers and are automatically compiled into native applications by linking with SDK Device Wrappers.

Writing a JavaScript to C++ compiler was merely and appetizer. Our next goal was powering-up JavaScript itself by giving it classes and type safety ... and CocoScript was born!


JavaScript with C++ Syntax and Language Features

In order to accelerate programming of large and complex games, we decided to power-up JavaScript. We were aware of efforts such as Mozilla Narcissus, Prototype JS and Roger Poon's JavaScript++ that were extending classic JavaScript by introducing object orientation semantics, so we decided to re-engineer JavaScript++ in order to power-up JavaScript and Coconut2D SDK. The result was CocoScript!

CocoScript is JavaScript with real Classes! CocoScript is an extension of JavaScript language with intuitive class syntax and type safety for accelerated programming of large and complex applications. CocoScript parser and compiler are written in JavaScript !! and are part of open source Coconut2D SDK allowing Coconuters to extend the language as they see fit. A program written in CocoScript compiles to both JavaScript and C++. Therefore a game developed with Coconut2D Studio IDE and Coconut2D SDK is automatically compiled into Web Application for HTML5 Browsers and into a native app for iOS and Android devices, and Windows, Linux, Mac and SteamOS platforms.

CocoScript classes are first-class-citizens with Constructor and Destructor (called by 'delete' statement). The language offers real Inheritance, Access Modifiers (public, private, protected), Static Functions, function Overloads and Polymorphism, Virtual and Abstract functions, Optional Arguments, Enums, Constants, Properties (setter and getter), explicit Numeric Types ( Integer, Float, Time), Typed Arrays, Strict Type Checking and Safety, Type Casting and many more.

A revolutionary language feature is Finite State Machine Automata Semantics (FSM) that make Game Engine development and game control loops easier to implement and maintain. With FSM semantics a Class becomes a Game Engine by simply adding a "state" modifier and along with traditional class members such as functions, properties and variables, a class can also have States. A State entity encapsulates game logic and resources that should be allocated and executed only while a Game Engine is at the present state and deallocated automatically when the engine leaves this state.

The raw power of CocoScript comes from its state-of-the-art Parser and Compiler. A unique parser feature is object pointer and reference detection that is used for generating C++ code. Parser exports an Abstract Syntax Tree (AST) structure that is fed to the compiler for code generation. The compiler processes the AST and generates Code and Debug Symbol Tables that are used by the IDE for IntelliSence Coding (code completion) and Debugging. The symbol tables are extremely detailed so that even the most complex DOT statements with array indexes and function returns can be successfully recognized, making coding extremely productive.

Try CocoScript Compiler On-Line!


CocoScript FSM Game Engine Example

Debugging with Google V8 JavaScript VM Engine

mobileFX Coconut2D Studio runs and debugs games in CocoPlayer. CocoPlayer integrates Google V8 JavaScript VM Engine that executes JavaScript code at near Assembly speeds, where graphics are hardware accelerated using OpenGL.

Google V8 Debug features are exposed in the IDE so that developers can set breakpoints both in JavaScript and CocoScript, evaluate expressions, trace statements, etc.

CocoPlayer can simulate various iOS and Android screen sizes and screen resolutions so that developers can actually see how their game would look on different devices. From within the IDE a game can also be previewed and on various HTML5 / WebGL Browsers, iOS and Android devices too.

CocoPlayer displays the Frames Per Second (fps) and Tick Interval in milliseconds so that you can identify performance issues with your game. The surface emulates a touch screen with up to five fingers simultaneously touching the screen.

CocoPlayer component is available as stand-alone executable for Windows, Linux, SteamOS and Mac platforms as Qt project, and an ActiveX COM Component for legacy programming languages. The component is also integrated in mobileFX Digital Signage and VLT Platform so that your games can run on retail shops, casinos, airports, etc.

CocoScript Debugger is extremely intuitive and straight forward to set and use. Code debug stepping supports the standard step-in-out-over commands and follows the "disassembly" philosophy: if a JavaScript statement can be mapped to a CocoScript statement then the IDE automatically places the debug cursor on it; otherwise, the debugger enters the generated JavaScript code. In Coconut2D Studio IDE there is an Immediate Output Console where you can evaluate JavaScript expressions, trace objects and examine variables, and a sophisticated Object Browser Explorer for viewing your object's properties in hierarchical fashion.

Getting Started

The Workflow: setup, create project, import assets, create scenes, program, compile!

1. First you need to download and install Coconut2D Studio IDE and a set of third party SDK and tools such as Apache Ant, Google Android SDK and NDK, iOS Build Environment for Windows, Java SDK, and C++ compilers. Next you need to define a set of environment path variables and let Coconut2D Studio IDE know where those 3rd party tools and SDK are located by editing from Tools > Options the settings.ini file.
Have a look in the installation instructions below.

2. Next you need to create and load a new CocoProject. You only need to define a project root folder and Coconut2D Studio IDE will copy the necessary project files for you. A CocoProject template along with the latest Coconut2D SDK are maintained on GitHub. You should download the latest version of the template and place it in your Coconut2D Projects Folder. Every project you start creates a Symbolic Link to the template so that your projects are automatically upgraded to the latest version of Coconut2D SDK.

3. Then you need to import game assets such as images, spritesheets, fonts and sounds in the Web Folder. You should use the SpriteSheet Editor to "cut" textures into Animation Sequences and make their images power-of-two for better texture performance. Images are grouped by name so that developers can keep track of different resolutions and sizes of the same image. Sounds should be converted to OGG and this can be done easily by right-clicking on the sounds folder and performing a batch conversion (using 3rd party tool FFMPEG).

4. Refresh Assets Explorer and start creating Animation Scenes! The process of creating an Animation Scene is extremely easy: simply drag-and-drop images and sprites from Asset Explorer to the scene, set KeyFrames, TimeLabels, Actions and define animation motion tweens. You can test your Scenes in Scene Animation Editor and once you are ready you must right-click on the scene to generate its CocoScript; that is automatically converting the entire scene and its animations to a program Class for adding your game logic on the imported graphics. In terms of Object Oriented Programming, your scene is converted into a Class inheriting CocoScene base class of the Coconut2D SDK.

5. Next you need to create your Game Engine. A game engine is a Finite State Machine Automaton that executes the main game loop of your game. Coconut2D SDK has CocoGameEngine class to inherit from. In HTML5 the game loop is implemented using a < canvas > and subsequent calls to requestAnimationFrame. In native apps the game loop is a threaded loop implemented in a Device Wrapper Class.

6. Finally, Compile and Run! The last step is to compile your game and test it in CocoPlayer, Chrome, Firefox, your iPhone / iPad and Android smartphones and tablets. If you have followed the instructions in step 1 you should be able to upload the game to your mobile phone within minutes!

Coconut2D Installation Instructions

1. Configuring Coconut 2D Studio

Coconut 2D Studio will create a settings.ini file in your Windows Profile folder. It is important that you edit this file (Tools > Options) and define the paths of the 3rd party tools that are required.

List of 3rd party software required:

Git ToolsRequired
Java JDKRequired for building Android Apps
Android SDKRequired for building Android Apps
Android JNIRequired for building Android Apps
Apache AntRequired for building Android Apps
iOS Build Environment (Win)Required for building iOS Apps
Coconut 2D Git ProjectRequired
Beyond Compare 3Optional

settings.ini variables that you must set:

Path_JavaSDKThe path for Java JDK root
Path_AndroidSDKThe path for Android SDK root
Path_AndroidJNIThe path for Android JDK root
Path_AntThe path of Apache Ant bin
Path_iOSBuildEnvironmentThe path of iOS Build Environment for Windows
Path_MyProjectsThe path where your Coconut 2D Projects will be saved
Path_CocoProjectGitThe path where Coconut 2D Git Project is cloned on your computer
Path_BeyondCompareEXEThe path of Beyond Compare 3 Executable


Path_JavaSDKC:\Program Files (x86)\Java\jdk1.7.0_09
Path_iOSBuildEnvironmentC:\Program Files (x86)\mobileFX\Coconut2D\Data Files\3rd_party\iOS Build Environment
Path_MyProjectsC:\Program Files (x86)\mobileFX\Coconut2D\Projects\
Path_CocoProjectGitC:\Program Files (x86)\mobileFX\Coconut2D\Projects\Coco.project
Path_BeyondCompareEXEC:\Program Files (x86)\Beyond Compare 3\BComp.exe

2. Setting up GitHub for Coconut 2D SDK

Coconut 2D SDK consists of JavaScript WebGL Frameworks and the cross-platform native Common Runtime Layer for iOS and Android. You need to clone the GitHub project into your computer and set the local path to settings.ini so that other projects can automatically link to it. Every project you start creates a Symbolic Link to Coconut 2D SDK.

First you will need to download and install Git Tools:

Git Tools
Suggested Installation PathC:\Program Files (x86)\Git\cmd
Append PATH variable;C:\Program Files (x86)\Git\cmd
Windows Credential Store for Git

Then download Coconut 2D SDK:

Coconut 2D SDK Repository
Coconut 2D SDK Git
Suggested Cone PathC:\Program Files (x86)\mobileFX\Coconut2D\Projects\Coco.project
C:\Program Files (x86)\mobileFX\Coconut2D\Data Files\src\Coco.Project

3. Compiling iOS Applications

Coconut 2D Studio can build iOS IPA files by integrating with iOS Build Environment for Windows. You can code Objective-C and C++ and compile real native iOS apps deployable on iPhone, iPod or iPad devices, signed with your iOS Developer Program ID. No jailbreak required. You can download iOS Build Environment for Windows from here:

Download Link
Suggested Installation PathC:\Program Files (x86)\mobileFX\Coconut2D\Data Files\3rd_party\iOS Build Environment
Coconut 2D INI VariablePath_iOSBuildEnvironment
Environment VariableIOSBUILDENV_PATH
Append PATH variable;C:\Program Files (x86)\mobileFX\Coconut2D\Data Files\3rd_party\iOS Build Environment

4. Compiling Android Applications

Coconut 2D Studio can build Android APK files by integrating with Android NDK and Android SDK. You can code C++ and Java and compile real native Android apps, signed with your Android Certificates. You need the following software:

Java SDK
(Donwload jdk-7u51-windows-i586.exe)
Suggested Installation PathC:\Program Files (x86)\Java\jdk1.7.0_09
Coconut 2D INI VariablePath_JavaSDK
Environment variableJAVA_HOME
Append PATH variable;C:\Program Files (x86)\Java\jdk1.7.0_09;C:\Program Files (x86)\Java\jdk1.7.0_09\bin

Android SDK
Suggested Installation PathC:\Android\android-sdk
Coconut 2D INI VariablePath_AndroidSDK
Environment variableANDROID_HOME
Append PATH variable;C:\Android\android-sdk\platform-tools

Android NDK
Suggested Installation PathC:\Android\android-ndk
Coconut 2D INI VariablePath_AndroidJNI
Environment Variable-
Append PATH variableC:\Android\android-ndk

Apache Ant
Suggested Installation PathC:\Android\apache-ant-1.9.3
Coconut 2D INI VariablePath_Ant
Environment variable-
Append PATH variable;C:\Android\apache-ant-1.9.3\bin