28 February 2010

Make fun not money

Flanture enters game development arena. This is not surprise since there were few similar attempts in the past, but all failed due to lack of patience. Also, all previous attempts were done using AS2 but this one is pure AS3 OOP approach. As more and more stuff I learn I need some project to be occupied with and Flash game is one of the best out there.

Collaboration is also something I'm thinking about. Over at Kongregate Collab forum I was disappointed to discover how all new teams are made by kids 14-18 years old and their first thought is "we will split the money we'll make with this game". I'm not here for the money. I have my day job outside of Flash world and this is only my hobby and off course my passion, so I want to make a game(s) I will enjoy playing all over again. It's about FUN.

Working title for my first Flash AS3 game is The Last Dawn shooting/action/tank game. You will see progress of developing at the bottom of left sidebar. Deadline is Jun 30 2010. I'll start with Zedia's AS3 port of Feronato's artillery tutorial and build from there. This is a solo project, but I'm open for any kind of casual team development for another game.

*_*

22 February 2010

Improved Spiderweb AS3.0 Class

Spiderweb class from last post has a major disadvantage because it uses central web point (0,0) as control point of every curve. This doesn't allow much flexibility, so I've figured how to correct it and make our web look like real life object. The solution is to introduce one new parameter - stretch factor.

Take a look at the image below. Stretch factor finds where on the angle median is control point located. This value actually multiplies x and y position of point on circle which intersects median with that circle. OK?


If stretch factor is 1.0, spiderweb consist of concentric circles, if stretch factor is below 0.1, web will look much like examples from previous post and if value is greater than 1.0 you will get some flower-like shape. Values which mimics real life web are about 0.75 - 0.9 in my opinion, but you may find it different.

Here are some examples.


When you call spiderweb you have 5 parameters now : new spiderweb(a, b, c, d, sf);

Spiderweb.as

package com.blogspot.flanture.drawing
{

// Spiderweb drawing class
// author: http://flanture.blogspot.com
// version: 1.0
// February 2010

import flash.display.Sprite;
import flash.geom.Point;

public class spiderweb extends Sprite
{
private var _circles:uint; // number of concentric circles
private var _nods:uint; // number of nods on each circle
private var _df:Number; // circles distance factor
private var _fr:Number; // smallest circle radius
private var _sf:Number; // stretch factor

public function spiderweb(circles:uint, nods:uint, fr:Number, df:Number, sf:Number)
{
_circles = circles;
_nods = nods;
_fr = fr;
_df = df;
_sf = sf;

init();
}

private function init():void
{

var cx = 0;
var cy = 0;
var coords:Array = new Array();
var controls:Array = new Array();
var angle:Number;
var controlAngle:Number;
var currR:Number;
var angleStep:Number = 360 / _nods;
currR = _fr;

for(var k:uint = 0; k < _circles; k++)
{
currR += currR * _df;

for (var i:uint = 0; i < _nods; i++)
{
angle = angleStep * (i + 1);
controlAngle = angle - angleStep / 2;

controlAngle = controlAngle * Math.PI / 180;
angle = angle * Math.PI / 180;

var x1:Number = trim(currR * Math.cos(angle));
var y1:Number = trim(currR * Math.sin(angle));

var tx:Number = trim(currR * Math.cos(controlAngle));
var ty:Number = trim(currR * Math.sin(controlAngle));

tx *= _sf;
ty *= _sf;

var cpoint:Point = new Point(tx, ty);
controls.push(cpoint);

var point:Point = new Point(x1, y1);
coords.push(point);

}

drawStraights(coords);
drawCurves(coords, controls);
coords.splice(0, _nods);
controls.splice(0, _nods);
}
}

private function trim(num:Number):Number
{
var nstr:int = int(num*100);
return Number(nstr / 100);
}

private function drawStraights(array):void
{
this.graphics.lineStyle(1, 0xffffff);
this.graphics.moveTo(0,0);
for (var i:uint = 0; i < array.length; i++)
{
this.graphics.lineTo(array[i].x, array[i].y);
this.graphics.moveTo(0,0);
}
}

private function drawCurves(arrayA, arrayB):void
{

this.graphics.lineStyle(2, 0xffffff);
for (var j:uint = 0; j < arrayA.length-1; j++)
{
this.graphics.moveTo(0,0);
this.graphics.moveTo(arrayA[j].x, arrayA[j].y);
this.graphics.curveTo(arrayB[j+1].x, arrayB[j+1].y, arrayA[j+1].x, arrayA[j+1].y);
this.graphics.moveTo(0,0);
}
this.graphics.moveTo(arrayA[arrayA.length-1].x, arrayA[arrayA.length-1].y);
this.graphics.curveTo(arrayB[0].x, arrayB[0].y, arrayA[0].x, arrayA[0].y);
}
}
}


I hope you like the code.

*_*

19 February 2010

Coding spiderwebs in ActionScript3.0

After last post on AS2 wedge class I've done some research about geometry (thanks to comments by Steven), how to find coordinates of different points on circle if you know radius, center and angles and some interesting results show up which I'll present here. However I think I should move on further away from drawing API since last several posts were on same subject.

Another thing I wanted to write about is my Flash2nd project and newly formed Facebook Fan Page. I have released 58 clocks until day, latest one Obama clock (I don't have any political views what so ever). Check it out and download some free clocks.


12 February 2010

Math, charts and Algorithmists

One of my favorite ActionScript bloggers must be The Algorithmist because he is also an mathematician and you can learn a lot about programming by understanding the problem; sometimes reading/repeating Flash tutorials is just not enough.

Even very old stuff on blog are useful, check download section and, for example as2 wedge class file. This is not open source file, so you'll have to download it by yourself. This is a pie-shaped wedge drawing class using a quad. Bezier as a primitive.



In order to create entire pie like image shows use next code:

09 February 2010

Pyramids using AS3 drawing API

Let's continue from where we finished last post. We have Triangle AS3.0 class up and running and we want to use it and draw some pyramids.


If you look carefully you will notice that every pyramid consist of two triangles. This is actually simplified version where only two sides are visible and front side triangle has 3 x 60 degrees angles. This is the reason why we need only top pyramid point coordinates and its height, because with some simple math we can easily find other points.


05 February 2010

ActionScript3.0 Triangle Class

Next two posts are my continuing effort to understand drawing AS3.0 API. Before reading this one you might be interested in previous posts:

- Visual rectangles intersection AS3 example
- Understanding shearing using Matrix object
- Curves and fill with AS3 drawing API
- AS3 drawing API examples


This post will introduce custom ActionScript3.0 Triangle class and next post will show you how to use it with Pyramide class to draw a pyramid using one Point and pyramid height as only parameters. Triangle class is very simple. It uses 3 Point parameters and one Boolean parameter.


01 February 2010

Visual Rectangles Intersection AS3 Example

ActionScript3.0 Rectangle class is part of the flash.geom package besides Point, Matrix, Transform and ColorTransform. Any visual representation of rectangles has to be implemented by programmer. One way of doing it is to create new class and here I wanted to include rectangle color as initial parameter, so this new class vRectangle (from visual rectangle, off course) looks something like this:

vRectangle.as

package
{
import flash.geom.Rectangle;
import flash.display.Shape;
import flash.display.Sprite;

public class vRectangle
{
public var rect:Rectangle;
public var shape:Shape;

public function vRectangle(a:Number, b:Number, c:Number, d:Number, e:uint):void
{
this.rect = new Rectangle(a, b, c, d);
this.shape = new Shape();
this.shape.graphics.beginFill(e);
this.shape.graphics.lineStyle(2, 0x000000);
this.shape.graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
this.shape.graphics.endFill();
}
}
}
Class has 4 parameters to define a - rectangle's x position, b - rectangle's y position, c - rectangle's width and d - rectangle's height one additional parameter e - which defines rectangle's color.

 

template by blogger templates