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.

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.