Working with KineticJS and PreloadJS – preload images and display them on canvas

KineticJS is a great framework to manipulate canvas but when it comes to preload images for a project there’s no elegant way of doing this but creating your own code or using other libraries (most of them are either incomplete or are not maintained). The one I’ve using for some time is PreloadJS and since I am used to it I wanted to include it in my project to make things easier for me.

index.html

<!DOCTYPE HTML>
<html>
<head>
<style>
#container{
background-color: #222222;
width: 40px;
height: 40px;
}
</style>
<script src="kinetic-v5.0.1.min.js"></script>
</span><script src="preloadjs-0.4.1.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="app.js"></script>
</body>
</html>

app.js file

var layer, stage, assets, manifest, handleAssetsLoad;

//fire this function when preload is finished
handleAssetsLoad = function ( evt ) {

// get the image object from the assets
var imgObj = assets.getResult("image");

// create KineticJS Image
var test = new Kinetic.Image({
x: 0,
y: 0,
width: 40,
height: 40,
image: imgObj,
});

// add the shape to the layer
layer.add(test);

// add the layer to stage
stage.add(layer);
}

// create the kineticjs stage
stage = new Kinetic.Stage({
container: "dungeoneer",
width: 40,
height: 40
});

layer = new Kinetic.Layer();

// which files to load
manifest = [
{id: "image", src: "image.jpg"}
];

//initialize PreloadJS
assets = new createjs.LoadQueue(true, "images/");
assets.on("complete", handleAssetsLoad);
assets.loadManifest(manifest);

Spaceship Arena, a little space shooter game

spaceship arena

Welcome to Spaceship Arena

This is a space shooter game in which your mission is to survive as long as you can from the incoming waves of enemies.

There are three levels of difficulty coresponding with three score tables.

Source code can be edited in Flash CS4 and up or Flash Develop.

[link]

jQuery HTML select element with editable input field

A few days ago I had a small task which invloved building a simple non-scientific calculator, some fields with changeable values. The thing was it had some select tags that the user could edit the value. I’m sure there are plugins out there to do this job but I didnt wanted extra unnecessary code , just something something quick and simple. Here is how I did it, maybe it will help you.

html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tutorial</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <script src="jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <select>
           <option selected="selected" value="100">100</option>
           <option value="200">200</option>
           <option value="300">300</option>
           <option value="400">400</option>
        </select>
        <input type="text" name="" value="">
        <p>value:</p>
        <script src="jquery.calculator.js"></script>
    </body>
</html>

style.css

select{position:absolute; width:160px; height:23px; left:0; top:0; border:0;}
input{position: absolute; width: 140px;height:17px; left:0; top:0;}
p{position: relative; margin-top:50px;}

jquery.calculator.js

var $input = $('input');
var $select = $('select');

$select.change(function(){
 modify();
})

function modify(){
 $input.val($select.val());
 output();
}

function output(){
 $('p').text('value: ' + $input.val());
}

$input.on('click', function(){
 $(this).select()
}).on('blur', function(){
 output();
})

modify();

This is what you should get: jsfiddle

Try selecting a number from the list or click on the text box to add your own number.
Ofcourse this could be done more elegant but I wanted to show an idea of how could be done.

Skin Rendering with Away3D 4.1 and Stage3D

Now this is pretty impressive for web. It shows how far Flash has come. No, it is not dead as many cried out (and that’s because they don’t know what they are talking about) and looks more mature.

 

Take a look here for demo and read more details here.

Lines 3D (Christmas Edition)

 

Lines 3D is a fun puzzle game in a 3D environment !

The player moves balls around a grid to form horizontal, vertical or diagonal lines of at least five balls of the same colour. Once a line is formed player gets points

The game was made usin Away3D and also features local TOP SCORE

Files for both Flashdevelop and Flash CS5 .5

[ link ]

Dungeoneer – a cute little puzzle game

Dungeoneer

Dungeoneer

Welcome to Dungeoneer!

This is a puzzle game I made in which you must find your path to the exit to go to the next level.

You need to visit each dungeon tile, but only once! Each time you make a mistate you will loose a heart. You also need to watch that the time dosen’t run out. And yeah, dont fall over the edge!

The control is done by mouse.

The sample is just a demo. You get 12 levels in the full game.

 

[ Flash Game ] Xtreme Space Defender

Xtreme Space Defender

Xtreme Space Defender

This is space shooter game in which your mission is to protect a planet from incoming waves of enemies (ufos, asteroids, comets).

There are 5 levels of insane shooting and at the end you have to fight the big boss.

Use upgrades to make your ship better.

You can take a look here.