Posts Tagged ‘JAVASCRIPT’

Tuesday, December 3rd, 2013

There are tons of javascript engines out there that are partial or full game engines for javascript and html.  Choosing one is quite difficult so Breakouts is there to help you compare with a common game ‘Breakout’ across all your favorites and some you might not know.

Feature Comparison

Current Breakouts

Saturday, November 2nd, 2013

Could this be the library that makes SVG the vector replacement for Flash? Snap.svg being based on the SVG standard makes it a better fit for mobile and smaller computing.

Snap.svg is like Raphaël, and actually made by the same author Dmitry Baranovskiy. This library is sponsored by Adobe so this not only looks great as a library, but has the right support. Snap.svg is a very usable way to get vector graphics more accessible to creative iteration and into more content on mobile. It also makes working with SVG very simple over the verboseness of the declarative svg tags.

Silverlight and other xml based declarative markup vector/graphics libraries are nice for interop but it also causes problems with support across many browsers, exporters, etc. It is getting easier and there needs to be a way to get vector based content animating on mobile devices in browsers. d3.js, another awesome svg library,  has made it easy to combine data and svg/vector based beautiful charts, maps and more.  But Snap.svg has the library that looks more friendly to Flash type architecture and libraries combined with the simplicity of jquery like javascript selectors and control. The binary nature of Flash content can’t compare on the standard front so having Adobe interested in sponsoring a vector library that is standard is great. In the end neither Silverlight or Flash won but a combined vector and declarative vector framework in SVG has found new life with mobile and it appears a new contender in vector animation and interactive content.

Adobe, along with CreateJS and Cordova/PhoneGap has really been moving in good directions with sponsoring libraries and open source toolkits for mobile content creators.

Snap.svg makes it easier to use SVG and you can animate it.

Another unique feature of Snap is its ability to work with existing SVG. That means your SVG content does not have to be generated with Snap for you to be able to use Snap to work with it (think “jQuery or Zepto for SVG”). That means you create SVG content in tools like Illustrator, Inkscape, or Sketch then animate or otherwise manipulate it using Snap. You can even work with strings of SVG (for example, SVG files loaded via Ajax) without having to actually render it first which means you can do things like query specific shapes out of an SVG file, essentially turning it into a resource container or sprite sheet.

Finally, Snap supports animation. By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging.

 

 

Sunday, January 16th, 2011

Cocos2D has been ported to run in javascript and called cocos2d-javascript by Ryan Williams.

Cocos2D is a game engine similar to Flash in that it is a 2d engine but it natively renders to OpenGL ES.  Cocos2D-iphone was originally a port of Cocos2D, a python game engine.  But the similarities to Flash and DisplayObjects = Nodes, Sprites, Scenes, Layers etc. This helps to port games over fairly quickly or start in productive in cocos2D.

Having this in javascript is a great thing! It runs on html5/canvas/javascript.

What is cocos2d-javascript?

Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. It uses the latest features available in HTML 5 allowing real-time rendering of 2D graphics without the need for plug-ins such as Adobe Flash.

While HTML 5 is still new and not fully supported across all browsers it won’t be long before the vast majority of web users are able to enjoy all that it offers. When this time comes cocos2d-javascript will be an excellent way to develop games and applications.

To see a small sample of what is on offer, please check out the demo section.

cocos2d engines are now available on almost all platforms, so if you are building a 2d game and need a 2d engine typically with Box2D physics, cocos2d offers lots of ways to get the game out there with some porting work.

Friday, December 17th, 2010

EaselJS is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in html5.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

Lots of great javascript libraries have been made public including such contributions as this, Three.js (3d canvas/svg/webgl), Lettering.js (typography), audio.js (audio) and many many others, a complete pipeline is emerging. EaselJS adds to that a helpful flash like api for html5 (<canvas> + javascript).

The API contains these familiar classes for Flash/AS3 developers:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

Sunday, October 31st, 2010

Helpful tool for taking vector art from Adobe Illustrator .ai assets and exporting them as html5 with canvas script.

It is a visitmix lab product  so it is a Microsoft tool. Mike Swanson has builtmany great conversion tools for interactive such as SWF2XAML (silverlight/wpf markup).

Monday, October 11th, 2010

Pretty promising project over at PhobosLab of the Impact Game Engine running on the iOS platform using the JavaScriptCore Framework. The best part is it has all Canvas calls passed into run on OpenGL ES thus the speedy demo.

Biolab Disaster on the iPhone 3GS from Dominic Szablewski on Vimeo.

The game is running in its own process and is not using the iPhone’s browser at all. Instead, it’s just using the JavaScriptCore Framework to run the game. All the necessary calls to the Canvas API have been reimplemented with OpenGL-ES and the touch input is passed over to JavaScript to be evaluated by the engine. I of course had to make some changes to the engine, but the game source code is exactly the same as for the web version.

This would probably never fly on the App Store because it executes code or interprets it but is a very nice experiment. More discussion at Hacker News..

Saturday, August 21st, 2010

Here’s a look at another interesting flash player implementation by Joa Ebert using Java with OpenGL rendering support. It is at an early stage but has the right idea in hardware rendering to OpenGL which is easily cross platform and mobile capable with speed.


This project is pretty new but there is work to make it web browser capable either in a java applet or a plugin for IE/FF/WebKit/etc but there are also others that are out there using alternative renderers. Most of these are in early development with varying support and do not currently compare to Adobe’s Flash Player versions.  However the hardware rendering ones like JITB may beat it fairly quickly once all the other features are added.  Complete OpenGL based renderers like Unity or WebGL are fast and can run pretty heavy rendering because of hardware acceleration for all drawing and native support.

Other Flash Player implementations:

  • Lightspark
    • AS3 script via LLVM
    • Written in C++ (very portable for native)
    • OpenGL accelerated rendering
  • Smokescreen
    • runs in Javascript/Canvas/html5
    • limited support
  • Swfdec
    • Firefox plugin
    • Early development
  • Gnash
    • flash 7-9 support

Flash Players that use OpenGL as the renderer are nice because cross platform support is easier.  The reason why OpenGL is a great idea is it is so cross platform on desktop and on mobile, it is also coming soon in WebGL for the browser hopefully.

Versions of OpenGL and support

  • OpenGL ES
    • OpenGL ES 1.1 = OpenGL 1.5 and lower (fixed function)
      • Android
      • iOS devices 3rd gen and lessx
    • OpenGL ES 2.0 = OpenGL 2+ (current version 4.1 – shader capable).
      • iPhone (3GS or later), iPod Touch (3rd generation and later) and iPad
      • Android 2.2+
      • WebGL
  • OpenGL
    • Windows
    • OSX
    • Linux

There is still a clear open field for an open source player to match something like Moonlight for Silverlight or hardware rendered canvas. WebGL would be great to have in time if it gets support but it is also nice to have a compiled language in the content that works in the player faster than scripting but with the ease of scripting. Plugins are still very relevant if they can address that.


Friday, July 2nd, 2010

Unity is a great and agile company that responded to the iOS4 changes with something very nice, a C++ option to develop with the Unity engine on the iOS. They will implement this if using Mono is barred which so far hasn’t happened.  I have to say I wish this was an option for the Unity Engine all the time and hope they implement it anyways. For now Joachim Ante on the the Unity blog says this:

We continue to be excited about the iPhone, iPod touch and iPod as platform targets for Unity developers. While we don’t think C++ is the best language to write game code , using C++ as a scripting language has memory and performance advantages on low-end devices. This is a great feature to have for developers who want to squeeze the last ounce of memory & performance out of their games.

We still can’t believe Apple will force developers into choosing a specific language for development. And as mentioned, Apple is still approving every Unity-based game we know of. In case the situation changes, rest assured that we are working this Plan B.

We’ll be ready to talk more about this as well as share some time-line information with you soon, while of course waiting to find out if any of this will actually be necessary.

The Unity Plan B is that the C++ engine code that mimics as closely as it can to the Mono .net C# or Javascript code. From the samples on the blog the C++ and Mono (javascript in this case) samples are really similar.

Many current engines are legacy or have lots of bloat, unless you write your own, or maybe even still then. Though this is looking really clean for C++ game engine code, at least in comparison to current industry leaders for indie engines.

It would be a beautiful C++ library to use even if Apple doesn’t require it. Compared to the other indie game engines out this would be a sweet C++ engine for indies and hope they do this no matter. C++ can be written cleanly and with influence from a simplified C#/Javascript engine and clean API it makes for a killer C++ engine that makes sense. Right now native is really attrctive on embedded for some years to come.

A very basic comparison from their blog:

Javascript Sample

function Update(){
    //Spin the object around the world origin
    transform.RotateAround(Vector3.zero, Vector3.up, 20 * Time.deltaTime);
}

C# Sample

using System.Collections;
using UnityEngine;
public class Example  : MonoBehaviour {
    void Update(){
        //Spin the object around the world origin
        transform.RotateAround(Vector3.zero, Vector3.up, 20 * Time.deltaTime);
    }
}

C++ Sample

#include "UnityEngine.h"
class Example : public MonoBehaviour {
public:
    void Update() {
        transform.RotateAround(Vector::zero, Vector3::up, 20 * Time::GetDeltaTime());
    }
};

Things I am wondering…

  • Will this help porting to Android versions if they use the NDK?
  • How much smaller will my app be if I use the C++ version (attractive feature since the mono dlls are pretty big – even though I really dig mono)?
  • Wouldn’t a C++ version be a better base with pluggable scripting in C# if you want? Maybe an option for Lua with a similar API signature for all? Ok maybe over-engineering there…
Sunday, April 25th, 2010

A new Javascript 3D Engine that can render to Canvas and SVG has been released by mr. doob.

Mr. doob is a well known Flash developer that has added many great experiments and cool contributions without being stuck to one technology, making some great interactive projects in javascript, chrome experiments and html5 (canvas/svg) in addition to the work in Flash with toolkits like Papervision 3D.  Recently the Harmony html5/javascript sketching project generated lots of interest for an html5 sketching app.

Three.js is great because it is a 3d engine built with renderers in SVG and Canvas makes to a really good base for modular, cross platform 3d engine right now (as soon as IE9 joins the party). For a while a good javascript rendering library will need to support multiple renderers for browser differences in performance and supported dependencies like canvas, svg and webgl. Three.js has that reality as part of the design.

Currently the engine only supports particles and triangles/quads with flat colors. The aim is to keep the code as simple and modular as possible.

At the moment the engine can render using <canvas> and <svg>. WebGL rendering would come at a later stage but feel free to fork the project and have a go.

Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.

Sample Code:

var camera, scene, renderer;

    init();
    setInterval(loop, 1000 / 60);

    function init()
    {
        camera = new Camera(0, 0, 1000);

        scene = new Scene();

        renderer = new CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        for (var i = 0; i < 1000; i++)
        {
            var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
            particle.size = Math.random() * 10 + 5;
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.updateMatrix();
            scene.add( particle );
        }

        document.body.appendChild(renderer.viewport);
    }

    function loop()
    {
        renderer.render(scene, camera);
    }

Wednesday, January 13th, 2010

Gordon, a flash runtime written in javascript, is an interesting project that recreates the Flash Player into svg using javascript from a flash source swf file.

UPDATE: Also check out smokescreen for the same, html5/javascript interpreting SWF files.

This is an interesting direction. There are most likely many things that do not work about this approach for existing content. But it is also a neat way to create new content that might be simple enough to play on desktop and a mobile version.

All these examples work on an iPhone or iPod Touch.