explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Category Archives: gaming


by Leave a comment

as3isolib alpha 2008.11.03 new build released

This release addresses the issues associated with having a large number of scene items that might reside outside of the viewing area.  Also incorporated includeInLayout implementation for IsoContainer objects and renamed a few classes/APIs.

as3isolib home – link
as3isolib 2008.11.03 build – link


by 25 Comments

as3isolib alpha released

Yep its out there.  Yep its an alpha release which means that APIs, class names and basic project details are subject to change.  This release includes the source files, a SWC and docs.  I also added two of many tutorials to get people started.

as3isolib alpha release – link
as3isolib Google Code project page – link

Please feel free to send me questions, comments, criticisms, death threats, etc.  All input is welcome.

Thanks.
J


by 7 Comments

Absolute Isometric Depth Sorting

[update – 2010.01.27]

This should have been updated ages ago however I haven’t gotten around to it sorry 😦

A solution was found, check out the as3isolib’s DefaultSceneLayoutRenderer

[update – 20080909]

As I suspected, it was too good to be true.  More testing is necessary, however I feel I am on the right path.

[update – 20080908]

Finally did it!!!  Or at least it appears that I have accomplished my goals through initial testing phases.  I’ll restate those goals for clarity:

  • absolute isometric depth sorting – position & size determine depth without the aid of a tile based system.
  • objects residing at higher depths are still sorted by their intended visual placement including the possibility of appearing behind objects in the foreground whose heights may extend above the plane of the higher object.

Keep in mind this has only been tested against the case found in the previous updates where one object residing on a higher plane is tested against one object residing at a lower plane whose height is above the first object.  Further testing needs to take place in order to ensure this remains solid when multiple object are tested against one another.  Here is a quick rundown of a render phase:

  • container checks children for any size, depth, or geometry invalidation.  If so set a flag for further logic.
    • sort children by the following order:
      • elevation plane
      • isometric x value
      • isometric y value
    • if more than one elevation plane exists (simple check does children[0].z != children[children.length – 1].z), then we do a recursive manual sort by:
      • if A == B, continue
      • if A is intended to appear behind B (by performing a few simple position/geometry checks) then place B to A’s index + 1.
      • repeat loop
    • set each child’s depth to their index value within the sorted children.
  • call render on all children

[update – 20080907]

Ok so I made a big breakthrough.  I almost have it, I just need to refine the sorting algorithm just a tad bit more and it will be ready for a new round of testing.  Check out the screen shots (these are actual screen shots of the SWF, whereas the others from the earlier update were done using Sketchup):

The following 3 shots are obviously the good ones.  This test swf is animated with the blue box moving clockwise INSIDE the perimeter of the white boxes area and the orange box moving clockwise OUTSIDE the perimeter of the white boxes area.

Now here is the kink where I need to refine the sorting algorithm.  If the blue box’s screen y value is greater than the orange box’s screen y value, you don’t get the correct overlap.  Just a bit more tweaking and it should be good.

[update – 20080905]

After reaching out to a few contacts I thought I had made some progress.  Before I get started on this maybe I should post an image of what the problem is.  This is what I want to do:

Notice how the orange box is at a higher elevation than the gray boxes?  But using my current depth sorting algorithm the front-most gray box gets rendered behind the orange box like this:

My current algorithm slices up the scene based on elevations into an array.  The first array element would contain an array of all the gray boxes, the second element would contain an array with one element, the orange box.   Then I would sort both elements from front to back and order there depths recursively.  The issue with this sorting is that is still 2D depth sorting for a quasi 3D scene.

Any suggestions?

[update – 20080904]

So I kinda realized that this is great if you plan to not have stacked isometric objects.  In other words this works great if you are on a flat terrain map.  However this does not address issues with variable terrain (e.g. Diablo, Marble Madness).

I am still in the process of finding a smart, performance-friendly solution for this.  I am also thinking about setting a property on any container-type class that requires depth sorting to be able to use either the flat terrain approach (found here) or a variable terrain approach in order to maximize performance.

Thoughts?

[original post]

Recently I have been working on my Flash-oriented projects.  Specifically I started working again on isolib, an AS3 isometric library.

Used to in AS2 you could delegate the task of depth sorting to the flash player by doing some calculations and assingning a number without regards to wether or not a depth preceeding it was filled.  For example, I have 5 Sprites.  In AS2 you could assing Sprite #1 to depth 0, Sprite#2 to depth 50 and the other 3 Sprites could have arbitrary numbers assigned to them.  The flash player took on the task of ordering the display list for you.  In AS3 that is not the case as you will run into Run Time Errors if you try to assing a DisplayObject to a depth without the prior depths being occupied.  So now the task is assigned to the developer.

Now as many ways as there are to skin a cat, there are as many ways to do isometric depth sorting.  Almost all that I have found utilize tile-based algorithms.  Though they work with respect to tile-based applications, they don’t seem to do that great for absolute positioning.

Anyway to cut to the fat here is how I achieved Absolute Isometric Depth Sorting without the need to have tile-based logic assigned.  Before I jump in tho, my coordinate space is somewhat diffenent than that of traditional isometric coordinate spaces: x values go from the top-left to the bottom-right portion of your screen, y values go from the bottom-left to the top-right portion of your screen and z values go from bottom to top of your screen.  Make sense?  Okay, let’s go:

Almost any renderable element in my iso-world has to have x, y, z, width, length, and height depending on how many dimensions they occupy (2 vs 3 dimensions is like comparing a plane to a cube).  Let’s assume we are dealing with a cube.  Now since we the viewer represent the vantage point, I created a reference point to compare distances to which resides at x:100000, y:100000 and z:100000 (hopefully we will not exceed any points outside of that).  My sorting method simply compares distances from the right-front-most point of an object from the reference point.  That point is basically x:cube.x + cube.width, y:cube.y + cube.length, z:cube.z Now this is not fail safe but it does a good job in absolute coordinate spaces.

Obviously there is some more robust logic occurring in my IsoScene class in order to depth-sort but this is the basis for the sort.  Check out the demo app here – link

override public function render (recursive:Boolean=true):void
{
	var depthArray:Array = [];
	var infoObj:Object = {};

	var child:IPrimitive;
	for each (child in children)
	{
		infoObj = {};
		infoObj.child = child;
		infoObj.distance = Math.sqrt((camera.x - child.right) * (camera.x - child.right) +
			(camera.y - child.front) * (camera.y - child.front) +
			(camera.z - child.z) * (camera.z - child.z)) * -1;

		depthArray.push(infoObj);
	}

	depthArray = depthArray.sortOn(["distance", "x", "y", "z",], Array.NUMERIC);

	var i:int;
	for each (infoObj in depthArray)
	{
		if (infoObj.depth != i && (infoObj.child.positionInvalidated || infoObj.child.geometryInvalidated))
			setChildIndex(infoObj.child, i);

		i++;
	}

	super.render(recursive);
}


by 3 Comments

EventDispatcherProxy & ProxyEvent

Preface

This is gonna be a ‘stream of conscientiousness’ type post. Hopefully it will be rather easy to follow and not long winded.

Might want to open this and follow along: example flex application

In the Beginning

One of my pet projects has been making an isometric (i.e. Diablo, Diablo II) game for Flash. Part of that effort was to create an Isometric framework where a developer could easily create and manipulate isometric primitive objects while not having to deal with complex math or all the logic behind Isometric game engines. Suffice it to say its still in development and in the umpteenth version. Thank you OCD.

Initially I had made the framework in AS2, extending MovieClip, blah blah blah. Then AS3 came out and resolved alot of issues I was having while creating new ones. IsoLib made the jump to AS3. Now the basic unit was extending Sprite. That was great in one respect but generated alot of funky API methods that seemed counterintuitive.

At a crossroads

Recently I discovered Sandy 3D (or for those who can read Chinese, 3D 3D). What a phenomenal framework. I am completely blown away by it. Aside from the crazy parameter names in the API, it works beautifully. I haven’t fully decided to abandon my IsoLib efforts but this discovery certainly makes the idea more enticing. But for now I will continue trudging onwards as I think Sandy 3D may be a bit overkill or what I am doing. But peering into the framework, I discovered some things I was doing wrongly.

Mainly my basic visual unit was extending Sprite rather than being a data-type class with a stored reference to its visual attribute. Why would one choose this route? Well firstly it would make the framework’s API quite a bit lighter. Example: Rather than setting an IsoCube’s isoX or isoHeight, one could simple say isoCube.x or isoCube.height. So it certainly would allow a more intuitive API without rewiring Sprite’s public attributes. But it creates a problem.

Now that my visual class is hidden behind the scenes, I could not make use of events triggered on the non-public container aka. the base unit’s visual attribute rendered to the screen. So if I wanted to assign a click event to my isoCube, normally I would have to say isoCube.container.addEventListener… and again folks, container is non-public. Plus that again is not intuitive. I’d rather have a simpler API where I could say, isoCube.addEventListener… and it would do the dirty work behind the scenes. The other reason is that I want to the event target that is handled to be isoCube, not isoCube’s container. Don’t ya love OOP?

Enter EventDispatcherProxy & ProxyEvent

Proxy means alot of different things to alot of different people. My browser proxy, my proxy settings, etc., etc. But looking at a dictionary definition it simply means something which acts on behalf of something else. So this is an excellent name. Basically I want a class that will act as an IEventDispatcher on behalf of a non-public attribute who is also an IEventDispatcher.

Disclaimer

Now keep in mind I made this little thing in a day, and it is completely plausible that I am overlooking some one-liner AS3 trick that does all this for you. If so, please let me know.

How it works

EventDispatcherProxy is an IEventDispatcher which contains a few other items in it. It has:

  • public var proxy:IEventDispatcher – this is normally the instance, but you could dispatch on behalf of someone else too
  • public var proxyTarget:IEventDispatcher – the target which you are acting on behalf of
  • a non-public hash table to keep track of all the things you are intercepting
  • a redispatcher method that intercepts proxy’d events and triggers the appropriate handler function with the event target being he EventDispatcherProxy not the proxyTarget

ProxyEvent extends a regular ol’ Event with two additional properties:

  • public var proxy:IEventDispatcher – this will reference the instance of the EventDispatcherProxy, in the case of the IsoCube example above, this would be the IsoCube itself
  • public var targetEvent:Event – this is a reference to the original event that got intercepted and proxy’d for.

Its all theory for now or is it…

I am posting a zipped project for you to check out. Please give me some feedback.

example flex application

Thanks,
J


by 7 Comments

Wii Remote + Flash/Flex = ?

First off. Either I am severely out of shape or I really went at it too hard. But I am sore as hell. I prefer to think the later though. Wii boxing & tennis are as addicting as… well um… crack?

So after my initial ravaging of the Wii and a Wii Sports marathon, I got to thinking. How could I hack this puppy and do some really cool things? Has anyone played Chick-Chick-Boom? Probably one of the funnest flash games out there this year. And I am addicted. And did anyone notice? Its a Nintendo Flash game!

The point is this: We have a really cool user interface tool (i.e. the Wii remote) and we have easy access to create incredible web experiences (with Flash and Flex). I don’t know about you, but I stand at a precipice, looking down at the valley of innovative web experiences using these combined technologies. Remember Minority Report?

So here is my proposed game plan:

  1. Find out how the Wii remote works – done*
  2. Find/make a suitable conduit to facilitate communication between the Wii remote and a PC – done*
  3. Improve upon this conduit to make interactions closely resemble those on the Wii console
  4. Translate the information into something useful (i.e. an API) for a Flash/Flex application to utilize. Obviously if we develop a user interface to make use of traditional gestures like mouse moves, clicks, keyboard clicks, etc.. then we will have failed, But if you make use of the Wii gestures, then we can…
  5. Develop kick ass applications that make use of this technology.

* There are documents and some alpha quality programs out there already.