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.
Screenshots & Features
Meet Coconut2D IDE, Plugins and Technologies through a smart Pictorial- Show All
- Scene Designer
- Device-independent Graphics
- Sprite Sheet Designer
- Sprite Altas Designer
- WebGL Integration
- Code Editor
- intelliSyntax
- CocoScript
- git
- Jira
- node.js
- Classic ASP
- Debugger
- Database Design
- JSON
- REST API Wrapper
- Device Simulation
- Sandbox
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
Games Lobby
Show-off your Coconut2D games in our Lobby
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
Device Independent Game Design
Coconut2D enables device-independent game design with Adaptive Scaling
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.
