JADBOX: Web Application Musings » Showcase

JAD Update: Social Games

admin — Wed, 06 Apr 2011 19:22:20 +0000

I’ve decided that I’ve neglected my blog long enough and decided it was time for an update. Here we go *long breath*…. Within just the past couple years, I’ve moved from Michigan to San Francisco and have been working primary in building mobile and Facebook social games that have given rise in the gaming industry. I did a number of projects at Crowdstar including Hello City and Mighty Pirates, and now I’m working on the largest project yet in my career at a newer startup called Metamoki (created by Dave Maestri, founder of Mafia Wars). The game development industry in Silicon Valley is rather interesting on a couple of facets. In some ways, it’s repeating the game design that originated back in the DOS and Commodore days. On the other hand, there are mechanics that are new and ‘alien’ in nature. Of course I am referring to the “social” aspect of Facebook games. In some FB games, the meaning of social is almost laughable as it doesn’t really exist. Even the best games in the industry still do not compare to the social aspect of co-op gaming that is rather prevent now in modern commercial games. Recently, big names in the traditional gaming industry are starting their own studios in hopes of breaking into the market. It will be very interesting to see what happens within the next two years.

Aside from the industry as a whole, I’ve been busy writing my own isometric engine, data structures, tooling, and learning other languages to support my day-to-day work. As soon as I think I’ve built the fastest possible system, I always find one more way to make the performance that much faster. I’ve also come to understand computer science more on a fundamental level beyond languages. It really helps to know what is happening behind the scenes when using language core libraries… just because a language provides a core function doesn’t mean you should use it! I have written a great deal of code that basically does what Flash already provides, but the level of performance can reach an average of 2-10x improvement (which helps significantly). I’ve also been following the methodologies of SOLID <http://en.wikipedia.org/wiki/Solid_(object-oriented_design)> and being mindful of these principles really improves the rate in which I can iterate game concepts and cuts down time to complete maintenance tasks.

I’ll finally wrap-up and show off the last two games I’ve developed at my previous work with Crowdstar:

Visit the games below:

http://apps.facebook.com/hello-city

…

http://apps.facebook.com/mighty-pirates

Maestri

FlashMVC 2.0 Released!

admin — Mon, 15 Jun 2009 14:04:41 +0000

I am very pleased to announce a major update to FlashMVC to version 2.0 with its OWN website at www.flashmvc.com! This version is a complete rewrite of the original version with better attention to scalability and framework usage. Since this is a dramatic upgrade, I have changed the package name to com.jadbox.flashmvc2. This version scales much higher allowing actions to relay complex messages to the view and built-in code hinting system for the view to execute an action. This is done by a new class called SuperAction. Let me start with the basics:

action classes – these are normal classes (do not need to extent any classes) that perform an action
SuperEvent – this class acts like a model for a specific action class, as a constructor proxy for the action class. and as an event for once the action completes.
SuperModel – This class holds references to SuperActions which, in turn, hold references to SuperEvents and your action classes.
SuperAction – This class is a controller proxy between your view and the action that it needs to perform. It allows the user to dispatch a SuperEvent that gets used as a model/constructor for your action class.

Benefits from version 1.0:

The action has its own model/view (SuperEvent) to inform the view
- The SuperModel has fewer global variables as actions have their own dedicated models
The model (SuperEvent) also mocks the constructor of the action class for code hinting
Using the framework with Flash is the same exact flow you would use with Flex (or Flash Builder)
Much more readable code for applications made with the framework.
ActionHelper removed in place of SuperEvent
If an action doesn’t require a unique SuperModel, you can use the base class SuperEvent or make a SuperEvent that covers multiple action classes (less recommended).

Example running an action:

SuperWebsite.instance.loginAction.dispatchEvent(new LoginEvent("test@test.com));

Example reading an action:

SuperWebsite.instance.loginAction.addEventListener(SuperEvent.COMPLETE, onComplete);
function onComplete(event:SuperLogin) { if(event.isInvalidEmail) trace("email was invalid") };

Head over to www.flashmvc.com and check it out!

What’s New, Doc?

admin — Tue, 05 May 2009 15:20:26 +0000

I have had some people asking me what I have been scheming lately which in honest hasn’t been much. The weather here in Michigan has been finally nice for a change so I have been spending most of my free time cycling. However, I did go out last weekend and finally bought the fabulous Gang of Four book Design Patterns to add to my library. I know enough C++, JAVA, and Smalltalk to decipher the examples and apply it to whatever language I might be using these days (which has been lots of AS3, haXe, C#, and Unity3D). I also decided to join the tablet bandwagon and added a Wacom Bamboo to my collection in hopes that it will inspire me to work on my art portfolio that I have been neglecting. The surface really feels (and sounds) like you are drawing on paper!

In the next coming weeks I will be working on FlashMVC to do some cleanup and perhaps add more examples to the repository.
Lastly, I have been experimenting on AI development with local unit world data deresolution and querying. Such a system I am building will allow NPCs to explore large environments while meta tagging locations of interests for latter lookups. Usually this isn’t as complicated as the process I am developing, but I have to design something that is agile and performs well in the Flash player environment. I will blog more about this soon most likely.

O, and thank you to the people who came to my lecture on design patterns last week! I hope everyone was able to walk away with some practical knowledge to apply to their own projects. There is a good chance that I might continue this lecture in the future to dive deeper into a variety of AS3-applicable development pattens. The video camera we had in the room had some issues (we lost the second half of the lecture), but I hope to get the recording compressed and posted here soon.

Detroit Design Patterns Lecture pt. 2

admin — Mon, 27 Apr 2009 16:59:45 +0000

This Thursday, April 30th, I will be continuing my lecture on Actionscript design patterns and principles at the Detroit Adobe User’s Group meetup. See the first lecture post here for directions and time information. This week I will be covering different mainstream design patterns in detail and if we have time give a brief overview of popular MVC frameworks that help accelerate application development. However, I do believe that teaching patterns and frameworks without knowing good object oriented principles is fruitless so I will also continue this topic discussion into the next portion of the lecture.

The conference is free to attend, and anyone from beginners to experts are welcome to join!

FlashMVC Update: addResultListeners

admin — Tue, 07 Apr 2009 20:07:00 +0000

I have just finished up making another addition to my framework FlashMVC. The update effectively removes the need to use ActionBinder as I will indicate below. ActionBinder was a neat utility, but ultimately I wanted solution that was just as simplistic but could be usable for both Flash and Flex. I couldn’t find any easy solutions until I thought about retrofitting addEventListener with an alternate form to allow callback functions to fire for specific commands on the SuperModel. Hence, I have added these three new methods to SuperModel:

.addResultListeners(actionName:String, onSuccess:Function, onFail:Function)
.addStatusListeners(actionName:String, enabled:Function, disabled:Function)
.addHasActionListeners(actionName:String, added:Function, removed:Function)

Now in your view, you can do something like this in your view:

var app:MySuperApplication = MySuperApplication.getInstance();
app.addResultListeners(MySuperApplication.Login, onSuccess, onFail);
// SuperModel.perform(name of the action, optional onComplete function, ...Rest for the parameters of the action class)
app.perform(MySuperApplication.Login, null, "test@invalidemail@.com");

function onSuccess(result:*):void {
trace("Login was successful");
}
function onFail(result:*):void {
if(result==MySuperApplication.RESULT_INVALID_EMAIL)
trace("invalid email used");
}

Updated ASDocs Here

Aside from this addition, I added in some safeguards like throwing an error if a command tries to call ActionHelper.complete() more than once as well as some other fixes. ActionBinder is still useful in the Flex world as it can help increase readability in some cases, but SuperModel now has most of the nice features built into it.

Please let me know if you have any comments! I am still working on adding in the replay feature to the framework which hopefully I will have done soon.

HaXe vs Unity3D vs XNA vs others

admin — Fri, 03 Apr 2009 01:08:22 +0000

For the past couple months, I have been trying to determine the best platform to become my primary language for game AI unit development, shaders, and working on theories of improving the Fridge-A* algorithm. However, choosing the right language has become an arduous task. Hardcore programmers will scream “C++ is the only way to go!” while the elites say “C is so much better than C++” and of course there is that one guy who comments “Why would you use anything other than Assembly language?” The problem lies in the fact that I am doing this work on my own and do not have XX hours to write an elaborate garbage collector, manage raw threads, or constantly keep track of hundreds of pointers. On the other hand, I must have enough speed and processing power to do the research and development I want.

Some suggest Java as a game platform as the language is respectable. However, graphics rendering speed and the Java gaming community is poor at best in my humble opinion. I did enjoy using BlitzMax back in the day, but the engine is simply not powerful enough to create something near commercial quality. Also, the popularity of the language is low, and I would have little professional use for learning more of the language. Flash AS3 is my primary profession; however, its performance leaves much to be desired at times. On the other side, Silverlight 3 is looking rather nifty, but the API still looks funky and doesn’t seem like the engine is really mature enough to do any major development in. Perhaps, if Silverlight 4 has near XNA speeds, better shaders and bitmap drawing, and the XAML to C# connection has less oddities in the API… it would be a contender for my list. Aside from the web platform, I could also go for a super high-end engine like Unreal Engine 3 or Source, but I couldn’t ever hope to produce something commercial with it because of the insanely expensive licensing (hundreds of thousands we are talking about!). Of course this is also Torque, but I have not been impressed with any of the games made on the platform, and there is a moderate cost to get started with it.

So I eventually evaluated my choices to XNA, haXe, and Unity3D:

Pros:

Very fast (Fastest of the choices)
Great shader support
C# is a nice language with advanced OOP support
Xbox and Windows deployment
Free for indie users

Cons:

Meant really for just the xbox… there is little support for Windows only deployment and DRM concerns. Also, no luck for Macs.
Unlike the other two, XNA cannot steam which means a smaller audience because of the hassle of downloading
Super new so the community is not that large in general

Pros:

Compiles out to Flash which 98% of users have already installed
Real-world benchmarks show 2x the speed of Flash 9 using code performance optimizations unique to haXe
From working with haXe, I will use that same knowledge to build javascript and neko scripts in the future if I wanted
I can use my existing knowledge of Flash to accelerate my development
Totally free

Cons:

No Flash IDE
Also super new with a small community and little to speak of tutorials
Still slower than unity3D and XNA
Currently does not support importing Flash libraries which reduces the amount of existing libraries I can bring over versus just using Flash AS3.

Pros:

Fastest of the web 3D engine… also nice looking
Supports developed on Macs and now Windows
Uses Python for scripting
Supports large number of users for networking and shaders

Cons:

No free version to try things out (only 30 day trial)
Costly software (the indie license has a terrible roster of features making the Pro version the ideal choice)
Little resources and support for making 2D games… everything is geared for 3D development. This can be a negative thing for me as I like to develop quick 2D testing scenarios for AI scripts. From what I can see, there are few tools for doing advanced bitmap drawing.

Final thoughts:

In truth, I have not made up my mind yet. The pros and cons of all the solutions seem to make every choice the same weight in how it appeals to me. I could forsake all the above options and just go with C++ with Allegro or SDL, but they too have their ups and downs. Allergro is really slow without full DirectX/OpenGL support and SDL seems to have an aged API with little in the future for it. Also, neither of those libraries natively support shaders. XNA would give me all the speed I would need for what I am trying to accomplish, but using a language that streams over the internet would give me a much wider audience.

Well, what do you say readers? Are there other languages I should be looking at? For my next post on the subject, I will try to make some benchmarks in all of the three languages to test their true strengths.

Detroit Design Pattern Seminar

admin — Thu, 26 Mar 2009 04:24:45 +0000

On Thursday 3/26/2009, I will be giving an open seminar on design patterns for the Detroit Adobe User Group. I should have blogged about this much earlier but my free time has been spread thin of late unfortunately. It will be hosted at ePrize starting at 7:00pm and ending about 9:00pm. I will be covering just some introductory topics of good programming practices with AS3 while diving into some design pattern concepts. There is also a good chance that I will do a more advanced seminar on design patterns in the near future at the user group meetings. This conference will be free to the public so please leave a comment or shoot me an email for directions or more information.
-[ Jonathan_Dunlap::email="jonathan AT jadbox.com" ]-

View Larger Map

FlashMVC API Update

admin — Sat, 21 Feb 2009 22:42:13 +0000

While having time this weekend to review a few of the Flash projects I’ve been working on, I became aware of the idea that every software “action” has the anticipated state of failing. Login will fail if the user enters incorrect credentials or leaves a field empty; A user cancels a file copy operation; A reg form may fail if the user is not permitted to enter the site based off their information. It’s not that the application is failing because it can’t reach a web service or something unexpected happened, but rather a planned reaction was developed to give the user a negitive response to their action. In light of this, I have updated FlashMVC to allow actions to designate that it’s result is negitive/failed. Then on the SuperModel side, the view can optionally supply a fail callback function for when the action designates that it failed.

// Action class
public class Login {
public function Login(helper:ActionHelper, name:String, password:String) {
if(name=="user" && password=="pw") {
SuperSimpleApp.getInstance().userFirstName = "John Doe";
helper.complete();
} else {
if(name=="" || password=="") helper.result = SuperSimpleApp.RESULT_EMPTY_FIELDS;
helper.complete(false); // "false" tells the caller that this was not successful
}
}
}

The line “helper.complete(false)” tells the SuperModel that the action completed but it was a negative response. In this example, it was failing the login action. So we have the action created, now we need to create the SuperModel that its attached to and the SuperModel will also service as its model.

// SuperModel
public class SuperSimpleApp extends SuperModel {
public static const LOGIN:String = "Login"; // String reference to the class name for the view to call
// Flag a response to use in special situations where the view needs to know more about the result
public static const RESULT_EMPTY_FIELDS:String = "emptyFields";

public var userFirstName:String;
public function SuperSimpleApp() {
// Register the class to the SuperModel for use.
// Note: once the action is added, use the string name of the class to reference it
actionAdd(Login);
}
public static const getInstance():SuperSimpleApp = new SuperSimpleApp();
}

Now in Flash or in your Flex MXML you can run your Login action like this:

var superModel:SuperSimpleApp = SuperSimpleApp.getInstance();
// loginAction will hold the action class we want to call and setup the onSuccess and onFail callbacks.
var loginAction:Performance = new Performance(SuperSimpleApp.LOGIN, onSuccess, onFail)
// ...
// Now later in the code, run the action now on the SuperModel with a test username and password
function onSubmitButtonClick(e:Event) {
superModel.process(loginAction, "user", "pw");
}
// If the user is logged in successfully
private function onSuccess(result:*):void {
trace("Hello "+ superModel.userFirstName);
}
// If the login action designated a negative response to the request:
private function onFail(result:*):void {
// Check the result against known responses flagged in the super model... otherwise give generic message.
if(result==SuperSimpleApp.RESULT_EMPTY_FIELDS) trace("Please fill out all fields");
else trace("Invalid username or password");
}

This should help having to deal with common success and fail responses from actions. Let me know what your thoughts are!

ActionScript Reference for Android!

admin — Sun, 01 Feb 2009 22:17:30 +0000

After seeing that someone wrote an ActionScript reference application for the iPhone called ActionScript 3 API Reference for iPhone, I decided to take matters into my own hands and make the same application for the Android platform which the t-mobile G1 works on. The Android OS is a fantastic platform for a developer as I made this whole application over just two weekends. For the first release, I included a view to see all classes and a class search functionality. You can now download this from the Market on your Android phone! You can find it under the Application – Reference section, and it’s called ActionScript Reference. See the below screenshots…

Classes View:

Class Information View:

For more information on Android: http://www.android.com/

FlashVars for EVERYONE!

admin — Mon, 26 Jan 2009 16:49:12 +0000

When building utilities that can be used with both Flash and Flex, there are two common hurdles that developers run into. The first one is that Flex does not pull FlashVars the same way that Flash does. This means for ActionScript utilities that rely on html inserted variables will need to be separated into two separate files or need to have flashvars passed into the utility from the outside. Another hurdle is that Flash does not have a global reference to Stage- instead it can only be accessed through display children of stage. This is problematic for utilities that work with Stage as they can only get there reference of stage when it’s manually passed into the utility as a parameter which can result in an ugly web of stage references being passed around.

However, I finally got the time to develop a workaround that solves both problems with classes FlashVars and StageReference. The tricky part of this implementation was building a utility that could use the class Application but not reference it when it was being built from Flash since it would cause the compiler to fail from the invalid class reference. I worked around this issue by grabbing Application by getDefinitionByName so that the Flash compiler wouldn’t fail since it was a weak reference.

With Flash, use StageReference.stage = stage in Frame 1 or in your document class’s constructor. This will give you the global reference to stage and also allow the new class FlashVars to pull flashvars automatically when compiled in a Flash project.

The custom class FlashVars is used in this fashion:

var myFlashvar:String = FlashVars.parameters["myFlashvar"];

var myFlashvar:String = FlashVars.parameters.myFlashvar;

This usage is exactly the same from Flash and Flex! No more having to switch from loaderInfo.parameters to Application.application.parameters when porting utilities between Flash and Flex.

Download (includes StageReference): flashvars.zip

Icon spoofed from icanhascheezburger.com.

flashMVC: New Utility ActionBinder!

admin — Tue, 09 Dec 2008 15:39:38 +0000

I just update the SVN (svn.jadbox.com/public/) source for flashMVC with a MXML component tool I made for the cases that I was working with Flex. It’s located in com/jadbox/flashMVC/flex/ActionBinder.as, and it helps automate the view (aka MXML) portion of your application to communicate with your SuperModel. It will monitor the status of a particular action on the model, and allow the user to easily perform view updates or to run the action itself. This will help further reduce the amount of work you will have to do in Script tags (if not completely remove the need for one in the MXML).

// Example
<flashMVC:ActionBinder superModel="{mySuperModel}"
action="{mySuperModel.LOGIN}"
id="LoginBinder"
actionComplete="{trace('Login action completed')}"
actionEnable="{trace('action enabled')}"
actionDisable="{trace('action disabled')}"
actionPerforming="{trace('working')}"
actionStoppedPerforming="{trace('stopped working')}" />

// You can also do the action from the wrapper:
myActionBinder.perform(...args);
LoginBinder.perform(username.text, password.test); // for example

// Can use this property to
// enable or disable the action as well:
myActionBinder.actionEnabled=false;

You can find a great example of this in my SVN under the path:
/flex projects/flashMVC examples/actionBinderExample/
You will just be sure to link the flashMVC framework from the Flex project settings to compile.

Asdocs have been updated with the ActionBinder’s API. For more information about nimble flashMVC framework, go the flashMVC tab at the top.

Next on my list of features for flashMVC is the application “replayability from imported xml log”. This will be really useful to utilize in Flash or Flex development!

flashMVC beta released

admin — Wed, 10 Sep 2008 14:16:48 +0000

I have finally released a pet-project of mine for handling simple to complex Flash and Flex applications in a unified way. The framework provides a pattern for MVC (Model View Controller) and has lots of goodies to rapidly build prototypes. In the near future, I will be working on an extension to allow quick unit testing as well as better error handling. This is new so please leave feedback and comments! (-_^)P

flashMVC information and download page

JADBOX: Web Application Musings » Showcase

JAD Update: Social Games

FlashMVC 2.0 Released!

What’s New, Doc?

Detroit Design Patterns Lecture pt. 2

FlashMVC Update: addResultListeners

HaXe vs Unity3D vs XNA vs others

Further Reading on Design Patterns

Detroit Design Pattern Seminar

FlashMVC API Update

ActionScript Reference for Android!

FlashVars for EVERYONE!

flashMVC: New Utility ActionBinder!

flashMVC beta released