FlashJS is JavaScript graphics and game development engine with API similar to Flash one.
It`s HTML5 game development tool, based on verified for years Flash methodology.
Just write ActionScript 3 code inside of <actionscript> tag.
FlashJS was born at the crossroad of HTML / CSS and beautiful Flash objective model that is known by many interactive developers and fits great for game development.
This library allows to develop HTML5 games and applications in the way that is similar to ordinary AS3 development.
FlashJS was designed to show maximum perfomance for HTML/CSS platforms.
FlashJS is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.
FlashJS comes complete with example games code and syntax sugar for game developers.
Demonstrates how FlashJS can be used into arcade games development.
It uses Loader, DisplayObject, onEnterFrame event, KeyboardEvent and KeyboardManager - library that helps to handle intensive keyboard gameplay.
Physics code for car was just copied from Flash project.
Use arrow keys to drive and spacebar to use handbreake.
Map and car creation, beginning of game listing.
<actionscript>
var map = new DisplayObject();
map.addChild(new Loader('./assets/map.png'));
stage.addChild(map);
var carObject = new Car();
carObject.width = 32;
carObject.height = 46;
stage.addChild(carObject);
carObject.x = 200;
carObject.y = 200;
...
Adding listener for onEnterFrame event of stage.
... stage.addEventListener(Event.ENTER_FRAME, updateWorld); ...
Christmas arcade game. Uses CollisionManager, animated MovieClips, map is loaded as external MovieClip, prepared in Dreamweaver.
It was realy easy for game-designer to develop levels with dragging objects in WYSIWYG editor.
Open application by clicking on splash image. Use any key or tap on tree to jump.
Map & collision manager initialization, first level loading.
<actionscript>
var collisionManager = new CollisionManager();
var map = new DisplayObject();
stage.addChild(map);
function loadFirstLevel() {
collisionManager.clean();
collisionManager.addObject(characterObject);
var mapLoader = new Loader();
map.addChild(mapLoader);
mapLoader.load(new URLRequest("./assets/map" + currentLevel + ".html"));
mapLoader.addEventListener(Event.COMPLETE, respawnCaracterObject);
}
...
Сollision handling.
...
collisionManager.collisionStart = function(objectA, objectB) {
if(objectA === characterObject) {
var collidedCandy = objectB;
} else {
var collidedCandy = objectA;
}
if(characterObject.direction === 1 && characterObject.x < collidedCandy.x - 40) {
characterObject['xright']++;
}
if(characterObject.direction === -1 && characterObject.x > collidedCandy.x + 40) {
characterObject['xleft']++;
}
}
collisionManager.collisionStop = function(objectA, objectB) {
...
Application for learning FlashJS basics. Actionscript HTML tag, MouseEvent, DisplayObject, Loader, Tween, opacity, rotation.
Yaz is a popular internet mem in Russia.
Click on surface to activate application and move mouse over it. YAZZ would follow your pointer.
Tweening fish to mouse position.
var tweenY = new Tween(testObject, 'y', undefined, testObject.y, stage.mouseY, 0.5, true); var tweenX = new Tween(testObject, 'x', undefined, testObject.x, stage.mouseX, 0.5, true);
Fish initialization.
<actionscript>
var testObject = new DisplayObject();
testObject.width = 100;
testObject.height = 100;
testObject.x = 200;
testObject.y = 250;
testObject.rotation = 18;
testObject.fillColor = '#00ff00';
stage.addChild(testObject);
testObject.addChild(new Loader('http://www.rybaki.kz/cdata/jaz_/43.jpg'));
...
FlashJS initiator - Denis Radin would speak about project at annual sea side conference in Petrovac, Montenegro on September, 17.
Russian Flash platform mentor wrote article about FlashJS and joined development. Thanks to Rostislav Siryk for nice article and fixing IE9 issue !
Main issues for 0.45 version are: DisplayObject.graphics for drawing and pixels manipulation at the object surface, Loader and URLRequest modules, additional perfomance optimisation^ spritesheets animations, collision manager. Experiments with WebGL are continuing and aim is to create hardware accelerated FlashJS branch. Dynamic image masks for Chrome / Safari was developed. Want to help FlashJS?