Getting Started Download Now Version: Beta 0.1.6607 / Jan 2018

The perfect IDE for HTML5 WebGL Games

Coconut2D looks and works a lot like Flash, with a Scene Designer and a 2D Animation Model. Bind clips with classes and program your game logic using Finite State Machines (FSM).

Coconut2D integrates both with Google Chrome and node.js allowing you to write and debug the client and the server code of your games.

Coconut2D Market Place offers Plugins, Tools, Compilers, Frameworks and Assets that will boost your productivity and minimize your dependency on 3rd party tools.

Read More Screenshots

Integrate with a vast array of innovative technologies

Develop games by taking advantage of every web technology available today


CocoScript

CocoScript is JavaScript with real Classes, Inheritance, Strong Type System and tons of productivity features. Coconut2D uses CocoScript as its core programming language and cross-compiles it to ECMA JavaScript.

   WebGL

WebGL is a JavaScript API for rendering 3D and 2D graphics in HTML5 browsers without plug-ins. Coconut2D wraps WebGL into an Animation Object Model for coding interactive animations.

WebAudio

Web Audio API handles audio operations inside an audio context and allows modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph.

HTML5

HTML5 is the 5th standard of a markup language used for structuring and presenting content on the World Wide Web. Coconut2D can be used for developing both HTML5 Web Sites and HTML5 Games.

Coconut2D SDK

Coconut2D SDK is a Toolchain that introduces a virtualized HTML5 Canvas and uses CocoScript as single code-base programming language. Reusable code is organized into Frameworks and Device Wrappers.

intelliSyntax

intelliSyntax is an EBNF-based parser that analyzes source code in real-time. Coconut2D uses intelliSyntax for code completion and static analysis for JavaScript, CocoScript, C++11, ObjectiveC/C++ and Java.

Node.js Integration

Node.js is a lightweight JavaScript runtime built on Google's V8 JavaScript engine. Coconut2D integrates with node.js and V8 debugger allowing you to debug both JavaScript and CocoScript from within the IDE.

Chrome DevTools Integration

Chrome DevTools are web authoring and debugging tools built into Google Chrome. Coconut2D integrates with Chrome Developer Tools allowing you to debug both JavaScript and CocoScript from within the IDE.

Sandbox

Sandbox is an VPN Proxy Manager for routing requests from a desktop or mobile game client to Remote Game Server (RGS). Coconut2D offers seamless integration and token-based authentication with RGS servers.

HTML5 Browsers Support

Coconut2D can preview games in all HTML5 browsers and has browser-specific optimizations implemented in its Frameworks. Especially for Google Chrome Coconut2D simulates mobile device screen dpi.

Device Rendering Optimizations

Coconut2D IDE allows you to preview at design-time your game Scenes in every possible screen ratio and dpi. Coconut2D SDK has optimized Shaders for 60 fps performance even on low-tech mobile devices.

Asset Localizations

Coconut2D introduces Asset Localization features. You can organize your graphical assets per Locale and dpi, and preview different lacalizations and for different screen ratios and dpi both at design-time and run-time.

Jira Project Management

Jira is an agile project management product, developed by Atlassian. Coconut2D integrates with Jira offering unified Development and Project Management professional experience.

Git Flow Version Control

GitFlow is a branching model over Git that introduces formal versioning and is very well suited for collaboration and scaling dev teams. Coconut2D blends Git, GitFlow and Jira together for professional development.

REST API Wrapper

Coconut2D introduces a REST API Editing Tool that generates the source code for reading and writting JSON objects using CocoScript Document Object Model. Basically it wraps a JSON API into real Classes.

Community Market Place

Explore dozens of powerfull Plugins, Tools and Frameworks and supercharge Coconut2D
Enter Coconut2D Market Place

Screenshots & Technologies

Meet Coconut2D IDE, Plugins and Technologies through a smart Pictorial
Creating a Platformer Game
Creating a Tower Defence Game
Creating a Puzzle Game Game
Creating a Casino Game
Creating Intro Game Videos
Scene Editing in Time & Space
Smart Guides & Alignment
Reusable Animation Symbols
Scene Compare & Merge
KeyFrame Transitions Designer
Image Symbol Grouping
Image Device PPI Compatibility
Image & Sprite Tools
Sprite Sheet Creation
Sprite Sheet Animation Sequences
Sprite Altas Creation (Bin Packing)
Sprite Altas Code Generation
WebGL Shader Code Editor
Live Shader Edit & Preview
Shader Class Object Model
Sprite Atlas & Sheet ready Shaders
intelliSyntax Code Editor Tools
intelliSyntax Member Lists
Syntax Highlighting XML Definitions
Find Code Symbol References
CocoScript EBNF Grammar
Grammar Syntax Diagram
CocoScript Code Editor
CocoScript Game Engine FSM
Game Engine FSM Static Code Analysis
git Integration
git File History
git Flow Branching Model
Jira Issues Tracker
Jira & Git Flow Integration
Node.js CocoScript Compiler npm
Classic ASP & HTML5 Code Editor
Debugging CocoScript in node.js
Debugging ASP JavaScript in node.js
SQLite Database Editor
SQL Query Editor
Using Server & Client Datasets
JSON Designer
JSON Code Editor
REST API Wrapper & Type Editor
REST API Wrapper Code Generation
Device Design & Preview Presets
Automatic Texture Loading per PPI
Debugging CocoScript in Chrome
Animation Debugger (Tick/Paint)
Node.js Sandbox Proxy Server
Sandbox Proxy Configuration

Getting Started Documentation

We have put a lot of effort preparing a smooth learning curve for you,
with many presentations, training videos and detailed documentation
Getting Started Presentation Getting Started Guide

Device Independent Game Design

Coconut2D enables device-independent game design with Adaptive Scaling

Device-Independent Game Design Presentation

Adaptive Scaling

Adaptive Scaling enables device-independent game design. First you define a Base Resolution and a Safe Area Viewport in which you place the interactive elements of your game, and adaptive scaling fits it to any screen size and aspect ratio.

Base Resolution

Base Resolution refers to a legacy or virtual screen of 480x320 physical pixels with pixel density of 160 PPI for Android, and 163 PPI for iOS devices. In Coconut2D you can use either the legacy Base Resolution or define your own.

Physical Pixels

Physical Pixels (px) are the actual dots in a device's screen. Pixels Per Inch (PPI) is the physical pixel density measurement of a screen. PPI along with the diagonal inch size of a screen define its physical pixels and raster capabilities.

Pixel Ratio

Pixel Ratio is defined by a screen's resolution PPI divided by base resolution PPI. For example, iPhone6 has 326 PPI and iPhone3G which is the base resolution for Apple has 163 PPI. Thus iPhone6 Pixel Ratio is (326 ÷ 163) = 2.

Logical Pixels

Logical Pixels (pt) are defined as the number of physical pixels of a screen divided by its pixel ratio. Logical pixels are virtual mathematical points used in Coconut2D tools and graphics algorithms that aid in device-independent game design.

Safe Area Viewport

Safe Area defines a viewport in game world in which you must place the interactive elements of your game. At run-time and on screens with different PPI and aspect ratio, safe area scales until it fits either screen's width or height.

Image Symbol

An Image Symbol is a virtual image that groups bitmaps of the same graphic in different sizes and locales. When you drag-and-drop an image on a Scene you actually bind a Clip with an Image Symbol and Coconut2D decides which bitmap to load depending on keyframe transformations, selected locale and screen pixel density.

Base Image

Base Image is the bitmap that will render with 1:1 scale in Base Resolution. By definition a Base Image has multiplier @1x. Coconut2D design-time tools and run-time algorithms work with base image metrics but denser bitmaps may be loaded for rendering. Base Image abstraction enables programming with size-independent graphics.

Sibling Image

Sibling Images are bitmaps within an Image Symbol with sizes multiple to the size of the Base Image. Typically a sibling image multiplier is @2x, @3x, etc. and is loaded at run-time depending on screen pixel density and image transformations, in order to provide sharper and clearer graphics during rendering.

Device-Independent Game Design Presentation with Coconut2D IDE
In Scene Designer set Base Resolution from Toolbar
Click Define Project View to set Safe Area Viewport
Place game interactive elements inside the Safe Area.
Design backgrounds large enough to cover bleeds.
When you preview for a device, the safe area is cropped.
From Toolbar you can change and work on any screen size, pixel ratio and aspect ratio, or device preset.
Adaptive Scaling will fit Safe Area into the new resolution and load the appropriate dpi textures.
The black rectangle marks the target resolution.
The white rectangle marks the safe area resolution.
While safe area is adaptive-scaled to fit the target resolution, depending on aspect ratio there might be pillarbox or letterbox bleeds. Those are filled with background graphics.
This is how the game looks on iPhone6
This is how the game looks on iPhone4 (base)

JavaScript on steroids with C++ syntax
Compiles to cross-browser ECMA JavaScript

Real OOP with Classes and Strong Type System
Classes are first-class citizens

Finite State Machine semantics
Game Loop Base Class

Constructors and Destructors
Static Functions and Fields

Public, Private, Protected Access Modifiers
Published Access Modififer for Design-Time binding

Virtual Functions and super keyword
Static Functions and Fields

Class Property Setters and Getters
Global Constants and Enums

Interfaces and implements keyword
Structs with super fast instantiation

Integer, Float, Time, String, Boolean, Date datatypes
Typed Arrays and Arrays of Objects

Debug Symbol Tables for real Debugging
Code Symbols for IntelliSyntax Editing

Oper Sourced Parser and Compiler written in JavaScript
Formal EBNF Language Definition

Getting Started Training Videos

Getting started with Coconut2D training videos
Create New Project
IDE
Create Title Scene
IDE
Compile & Debug
IDE

Games Lobby

Show-off your Coconut2D games in our Lobby