interactive development & discussion
Here's a great interview with the hungarian developer, Kriz, who recreated this old game as closely as he could from scratch. I found it interesting he didn't even try to crack into it and look at the source code. He just watched closely and recreated what he saw. This is the 4th such game he is behind and I hope he keeps going!
Embedded Link
Wizard of Wor
There seems to be a trend of re-creating classic 8-bit games in JavaScript at the moment, including the recent and excellent Survivor. B
Ben Lowry has released all his code for his game InkTd. It is a standard tower style game with a bit of a twist. It gives options for 2 game modes: path mode and another called maze mode with the path being dynamically adjusted to reach the base. Sounds like it deserves porting to html5!
Embedded Link
InkTd Flash game source code released – Emanuele Feronato
Did you ever wonder how a complete tower defense source code looks like? This is your lucky day. A couple of years ago Ben Lowry, also known for being the founder of Playtomic, made a tower defense ga…
Here are my notes on the presentation from Lee Brimelow of Adobe at the Atlanta Adobe Users Group Meeting: http://www.meetup.com/Adobe-User-Group-of-Atlanta/events/56200162/
What is flash for? Doing things the browser can’t! If you can use HTML5 then do it. Learn about it and learn the capabilities and know when to use what tool and when they are appropriate. It might not be easy, but it is where the industry is moving, don’t hide from it! If you want to do things that are to advanced for the current standards and browsers, then flash is most likely where you need to be. Adobe will always position Flash to be ahead of what is possible with browsers.
While you can do some gaming in browsers today, flash is now positioned to be the best solution for game development. It even can compile to native apps for ios and many successful apps have done so. Adobe has put in a site to showcase these games at: http://gaming.adobe.com
Adobe has a new partnership with unity. See example game: Angry bots.
Console sales are declining. We have so many other outlets to game: browsers, social, mobile devices… Soon professional games will be via Facebook and browsers.
Facebook angry birds game built in flash using stage 3D.
New gaming features:
Mouse lock.
Right and middle click events.
Concurrency, multi threading for player. Yo will not lock up with intense calculations.
Native extension Burls and extensions.
CS6:
Sprite sheet exporter!
Create js exporter, via Grant Skinner
Html 5 export to canvas a vector art.
Edge
11.3 – latest flash player
full screen keyboard input.
Background auto updates.
Audio streaming via net stream.
Improvements for low latency audio.
Stage 3D progressive texture streaming.
Lzma compression sort door byte array.
Native bitmap encoding to png and jpg.
Bitmap data draw with quality
Frame labels.
Air specific
USB debugging for ios
Native ios simulator support
Enhanced background support for ios
Android 4 stylus support
Mac app store support
Dolores, upcoming updates
As workers
Advanced profiling
Better sort for hardware accelerated video cards
Next
Refactorizing code base
Work on as virtual machine
Many action script language updates: stringent static typing as default, hardware oriented numeric types, type inference…
The visuals for the game are great and the concept a familiar one. You control the angle and power of your canon and try to destroy your opponent. This great execution of this fun game uses a few new js libraries: Box2d, SoundJS, and Easel. Luxurious Animals, the agency behind it, has even blogged a bit about how they put it all together. http://www.luxahoy.com/
Embedded Link
Lux Ahoy
Lux Ahoy is a new Worms-style combat game created by New York based digital agency Luxurious Animals. Played out as a battle between the
very nicely done game. Strong nostalgic feelings from zelda on snes. Amazing the things that html5 can do with some serious javascripting.
Embedded Link
BrowserQuest – massively multiplayer fun
There's buzz aplenty across the interwebs with the launch of this new Mozilla game experiment: BrowserQuest.
Summarised by Paul Roug
Updates to the flash platform for game development and license requirements. Not as scary as the news makes it sound…
Embedded Link
The end is nigh, or is it? Adobe charges developers to make Flash content
Excellent post regarding the Flash platform and the compromised nature of technical reporting. It's good to hear people state facts based on an understanding of the subject matter rather than maki…
I’m really enjoying giving a control panel of sorts to the end user and letting them control the physics rules of their canvas. Let’s add more motion to it by applying a jitter to the velocity of each dot. This is similar to earlier, when we first started animating by applying a random number to the coordinates, but now we’ll apply a (smaller) random number to the velocity. This will be much smoother and will give a sense of real life to the dots. Straight lines and trajectories is always theoretical and hypothetical, but to make things look more real, sometimes we have to break the clean, straight lines. This will be another checkbox to control the float. I’m really enjoying the fact that the more properties we add to our controls we get exponentially more possible configurations. Perhaps we should even give a slider to control the strength of gravity…
interactive physics animations via javascript & canvas | 17.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 0;
var friction = .98;
var bounce = -.96;
var wrap = false;
var float = true;
var this_dot = {};
for (var i=0; i < total_dots; i++){
createDot();
}
function createDot(x, y, r, vx, vy){
var this_dot = {
x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width,
y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height,
radius: typeof(r) != 'undefined' ? r : Math.random()*20+10,
vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10,
vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-10
};
dots.push(this_dot);
}
draw();
$("#canvas").mousedown(function (event) {
var dx, dy, dist;
for (var i=0; i < dots.length; i++){
dx = event.pageX - this.offsetLeft - dots[i].x;
dy = event.pageY - this.offsetTop - dots[i].y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) {
drag = true;
drag_i = i
clickX = dx;
clickY = dy;
continue;
}
}
//none clicked
if (!drag) {
createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
}
});
$("#canvas").mouseup(function (event) {
drag = false;
drag_i = -1;
});
$("#canvas").mousemove(function (event) {
if(drag) {
dots[drag_i].old_x = dots[drag_i].x;
dots[drag_i].old_y = dots[drag_i].y;
dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
dots[drag_i].y = event.pageY - this.offsetTop - clickY;
dots[drag_i].vx = dots[drag_i].x - dots[drag_i].old_x;
dots[drag_i].vy = dots[drag_i].y - dots[drag_i].old_y;
draw();
}
});
function update(){
for (var i=0; i < dots.length; i++){
if (drag_i != i){
var this_dot = dots[i];
if (float){
this_dot.vx += Math.random() - .5;
this_dot.vy += Math.random() - .5;
}
this_dot.vx *= friction;
this_dot.vy = this_dot.vy * friction + gravity;
this_dot.x += this_dot.vx;
this_dot.y += this_dot.vy;
if (wrap){
if (this_dot.x > canvas.width + this_dot.radius){
this_dot.x -= canvas.width + this_dot.radius*2;
}
else if(this_dot.x < 0 - this_dot.radius){
this_dot.x += canvas.width + this_dot.radius*2;
}
if (this_dot.y > canvas.height + this_dot.radius){
this_dot.y -= canvas.height + this_dot.radius*2;
}
else if(this_dot.y < 0 - this_dot.radius){
this_dot.y += canvas.height + this_dot.radius*2;
}
}
else if (!wrap) {
if (this_dot.x > canvas.width – this_dot.radius){
this_dot.x = canvas.width – this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
else if(this_dot.x < 0 + this_dot.radius){
this_dot.x = this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
if (this_dot.y > canvas.height – this_dot.radius){
this_dot.y = canvas.height – this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
else if(this_dot.y < 0 + this_dot.radius){
this_dot.y = this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
}
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){
context.beginPath();
context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
}
setInterval(function() {
update();
draw();
}, 1000/fps);$("#gravity").click(function(){
if($("#gravity").is(':checked')){
gravity = 2;
}
else{
gravity = 0;
}
});
$("#wrap").click(function(){
if($("#wrap").is(':checked')){
wrap = true;
}
else{
wrap = false;
}
});
$("#float").click(function(){
if($("#float").is(':checked')){
float = true;
}
else{
float = false;
}
});
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.
I always want to give the end user (at least some) control of how they view and interact with data. Earlier we gave users control over gravity. Here let’s give them control over the canvas edges. Rather than having our dots bounce on the edges of the canvas, lets have them wrap across to the other side. Like in the asteroids game the ship can fly to the edge of the screen and see space wrap them back to the other side. We’ll set this up as a control exposed to the user much like gravity. Let’s call it wrap and use a boolean value to store the setting. We’ll need to add another block of conditionals for this case where we have the set already with the bouncing. I took some care with the values so that the dots leave the canvas before they make the hyper-jump to the other side. Otherwise you’d see the magic. interactive physics animations via javascript & canvas | 16.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 0;
var friction = .98;
var bounce = -.96;
var wrap = true;
var this_dot = {};
for (var i=0; i < total_dots; i++){
createDot();
}
function createDot(x, y, r, vx, vy){
var this_dot = {
x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width,
y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height,
radius: typeof(r) != 'undefined' ? r : Math.random()*20+10,
vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10,
vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-10
};
dots.push(this_dot);
}
draw();
$("#canvas").mousedown(function (event) {
var dx, dy, dist;
for (var i=0; i < dots.length; i++){
dx = event.pageX - this.offsetLeft - dots[i].x;
dy = event.pageY - this.offsetTop - dots[i].y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) {
drag = true;
drag_i = i
clickX = dx;
clickY = dy;
continue;
}
}
//none clicked
if (!drag) {
createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
}
});
$("#canvas").mouseup(function (event) {
drag = false;
drag_i = -1;
});
$("#canvas").mousemove(function (event) {
if(drag) {
dots[drag_i].old_x = dots[drag_i].x;
dots[drag_i].old_y = dots[drag_i].y;
dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
dots[drag_i].y = event.pageY - this.offsetTop - clickY;
dots[drag_i].vx = dots[drag_i].x - dots[drag_i].old_x;
dots[drag_i].vy = dots[drag_i].y - dots[drag_i].old_y;
draw();
}
});
function update(){
for (var i=0; i < dots.length; i++){
if (drag_i != i){
var this_dot = dots[i];
this_dot.vx *= friction;
this_dot.vy = this_dot.vy * friction + gravity;
this_dot.x += this_dot.vx;
this_dot.y += this_dot.vy;
if (wrap){
if (this_dot.x > canvas.width + this_dot.radius){
this_dot.x -= canvas.width + this_dot.radius*2;
}
else if(this_dot.x < 0 - this_dot.radius){
this_dot.x += canvas.width + this_dot.radius*2;
}
if (this_dot.y > canvas.height + this_dot.radius){
this_dot.y -= canvas.height + this_dot.radius*2;
}
else if(this_dot.y < 0 - this_dot.radius){
this_dot.y += canvas.height + this_dot.radius*2;
}
}
else if (!wrap) {
if (this_dot.x > canvas.width – this_dot.radius){
this_dot.x = canvas.width – this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
else if(this_dot.x < 0 + this_dot.radius){
this_dot.x = this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
if (this_dot.y > canvas.height – this_dot.radius){
this_dot.y = canvas.height – this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
else if(this_dot.y < 0 + this_dot.radius){
this_dot.y = this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
}
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){
context.beginPath();
context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
}
setInterval(function() {
update();
draw();
}, 1000/fps);$("#gravity").click(function(){
if($("#gravity").is(':checked')){
gravity = 2;
}
else{
gravity = 0;
}
});
$("#wrap").click(function(){
if($("#wrap").is(':checked')){
wrap = true;
}
else{
wrap = false;
}
});
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.
Earlier we worked on making all the dots draggable, but what’s better than simply dragging dots? Let’s set up a way to throw the dots! Now as we drag it we record the positions and use that to calculate a new velocity. Then when a dot is dropped, it will have a trajectory to follow that matches the path and speed it was dragged. This iteration only looks at the current frame and the previous frame, but a better solution may be to average the previous few positions to get a better feel. I’ve noticed that (with a mouse especially) people tend to stop dragging just before they mouseup, so this kills any velocity the dot receives during the drag. Enjoy throwing the dots around the canvas! interactive physics animations via javascript & canvas | 15.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 2;
var friction = .98;
var bounce = -.96;
var this_dot = {};
for (var i=0; i < total_dots; i++){
createDot();
}
function createDot(x, y, r, vx, vy){
var this_dot = {
x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width,
y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height,
radius: typeof(r) != 'undefined' ? r : Math.random()*20+10,
vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10,
vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-10
};
dots.push(this_dot);
}
draw();
$("#canvas").mousedown(function (event) {
var dx, dy, dist;
for (var i=0; i < dots.length; i++){
dx = event.pageX - this.offsetLeft - dots[i].x;
dy = event.pageY - this.offsetTop - dots[i].y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) {
drag = true;
drag_i = i
clickX = dx;
clickY = dy;
continue;
}
}
//none clicked
if (!drag) {
createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
}
});
$("#canvas").mouseup(function (event) {
drag = false;
drag_i = -1;
});
$("#canvas").mousemove(function (event) {
if(drag) {
dots[drag_i].old_x = dots[drag_i].x;
dots[drag_i].old_y = dots[drag_i].y;
dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
dots[drag_i].y = event.pageY - this.offsetTop - clickY;
dots[drag_i].vx = dots[drag_i].x - dots[drag_i].old_x;
dots[drag_i].vy = dots[drag_i].y - dots[drag_i].old_y;
draw();
}
});
function update(){
for (var i=0; i < dots.length; i++){
if (drag_i != i){
var this_dot = dots[i];
this_dot.vx *= friction;
this_dot.vy = this_dot.vy * friction + gravity;
this_dot.x += this_dot.vx;
this_dot.y += this_dot.vy;
if (this_dot.x > canvas.width – this_dot.radius){
this_dot.x = canvas.width – this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
else if(this_dot.x < 0 + this_dot.radius){
this_dot.x = this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
if (this_dot.y > canvas.height – this_dot.radius){
this_dot.y = canvas.height – this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
else if(this_dot.y < 0 + this_dot.radius){
this_dot.y = this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){
context.beginPath();
context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
}
setInterval(function() {
update();
draw();
}, 1000/fps);$("#gravity").click(function(){
if($("#gravity").is(':checked')){
gravity = 2;
}
else{
gravity = 0;
}
});
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.
Here is an update to allow the end user to create more dots. A good way to do that is to just let users click on the canvas, and if they click a dot, drag it, if they don’t click a dot, create a new dot at the point of click. I moved the dot creation into it’s own function and we can use that as our constructor for every dot. It has settings we can send in, but the defaults are set to pick random values. This could also be used to create a particle emitter of sorts, but for now it’s just creating a dot on clicking the blank canvas. interactive physics animations via javascript & canvas | 14.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 2;
var friction = .98;
var bounce = -.96;
var this_dot = {};
for (var i=0; i < total_dots; i++){
createDot();
}
function createDot(x, y, r, vx, vy){
var this_dot = {
x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width,
y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height,
radius: typeof(r) != 'undefined' ? r : Math.random()*20+10,
vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10,
vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-10
};
dots.push(this_dot);
}
draw();
$("#canvas").mousedown(function (event) {
var dx, dy, dist;
for (var i=0; i < dots.length; i++){
dx = event.pageX - this.offsetLeft - dots[i].x;
dy = event.pageY - this.offsetTop - dots[i].y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) {
drag = true;
drag_i = i
clickX = dx;
clickY = dy;
continue;
}
}
//none clicked
if (!drag) {
createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop);
}
});
$("#canvas").mouseup(function (event) {
drag = false;
drag_i = -1;
});
$("#canvas").mousemove(function (event) {
if(drag) {
dots[drag_i].x = event.pageX - this.offsetLeft - clickX;
dots[drag_i].y = event.pageY - this.offsetTop - clickY;
draw();
}
});
function update(){
for (var i=0; i < dots.length; i++){
if (drag_i != i){
var this_dot = dots[i];
this_dot.vx *= friction;
this_dot.vy = this_dot.vy * friction + gravity;
this_dot.x += this_dot.vx;
this_dot.y += this_dot.vy;
if (this_dot.x > canvas.width – this_dot.radius){
this_dot.x = canvas.width – this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
else if(this_dot.x < 0 + this_dot.radius){
this_dot.x = this_dot.radius;
this_dot.vx = this_dot.vx * bounce;
}
if (this_dot.y > canvas.height – this_dot.radius){
this_dot.y = canvas.height – this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
else if(this_dot.y < 0 + this_dot.radius){
this_dot.y = this_dot.radius;
this_dot.vy = this_dot.vy * bounce;
}
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){
context.beginPath();
context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
}
setInterval(function() {
update();
draw();
}, 1000/fps);$("#gravity").click(function(){
if($("#gravity").is(':checked')){
gravity = 2;
}
else{
gravity = 0;
}
});
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.
