Optimizing the development process

Other Monday, March 23rd, 2009 @ 15:46 | Follow comments

I’m currently working with some research on how to create an optimized development process with between Artists <-> UI designers <-> Developers. This will be an ongoing discussion and evaluation process, but I’ve come to some conclusions this far.

What’s the deal, anyway?

I’ve been discussing the issue a lot with Peter, our team’s designer, and we’ve been trying to pin-point the most important parts of the process. Two of the main issues are:

  1. being able to have short “design-implement-test” iterations when implementing new features, making changes etc.
  2. maintaining a solid code base while still allowing non-developers to make changes to the interface.

Does the technology matter?

It’s hard to say which technology to use in order to meet the demands, as it depends very much on what the product really is. If it’s a game where instant and fluffy feedback is important, then we should probably make it a Flash app. If it on the other hand is more of a site, where larger sets of data are important to display in an easy-to-understand manor, then we should probably make it a HTML/AJAX app.

In our upcoming, and many of our current, projects we’re focusing a lot on the visual experience. We’re developing games. In Flash. So how can we optimize the processes with focus on Flash development?

Supporting short development iterations

In order to support short iterations, we need to make it easier for project members to change things without being hindered by their technical skills; a designer or artist shouldn’t need to have ActionScript expertise to change the colors of a button or the placement of a menu.

One way of solving this can be to use Flex with MXML. In MXML, the layout (View) can be changed using a special markup language, logically similar to HTML. Various components, such as buttons, can be positioned freely with some pretty easy-to-use tags. This is quite commonly used among developers all over the world.
Now I haven’t used MXML to any massive extent, but in my opinion, using MXML isn’t really all I want it to be. The code gets a bit ugly and somewhat hard to control.

We’ve got a great tool for this

A while ago, one of my co-workers developed our own framework where it’s possible to easily define views on an XML format. Some capabilities of the framework:

  • a widget (component) class can be mapped to an SWF file, i.e. containing the art assets for a widget
  • widgets can be positioned anywhere in its container, either with an absolute position or relative to any other widget
  • widgets can listen to events from other widgets, in order to allow for them to communicate with each other
  • a widget can consist of another XML definition to allow for better structure in the view document

It pretty much meets the demands one’s got on such a framework! An advantage (which could also be seen as a disadvantage) is that we can develop the framework further when needed, in order to add more nifty functionality.

Is this enough for us?

Anyway. Allowing the designer/artist to create widgets/components and using the widget framework for creating a layout is probably a very good way of meeting the demands of our desired work process. A couple of things that are vital:

  • The View (Widgets and Layout) needs to be clearly distanced from the actual functionality in order to maintain a solid and independent code base, i.e. no functionality should reside in the Widgets or the View document.
  • The widgets should be kept as small and isolated as possible, to make it as flexible as possible and avoid difficulties/conflicts in version systems.

We should try to identify if we have any further needs that aren’t met by our widget framework of today. As it’s a great system, we should really try to cling on to it and keep developing it (as we have up until today).

Share article with others:

  • Facebook
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • Twitter
  • Technorati
  • Reddit
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • email

2 Responses to “Optimizing the development process”

  1. esset says:

    A development of a new View in a Flash app could look something like this:

    1. Artist creates a sketch and any new assets in Flash IDE, while reusing existing components where applicable

    2. Designer uses assets and components to place them in a new View in the Flash IDE

    3. Developer adds functionality to the View and the new components (old components already have functionality)

    4. Iterate between steps 1-2-3 in any desired order.

    5. When done with iterations; break down the View into standalone components only, and adapt the completed layout to a new XML Layout file.
    The view should be able to compile using the Flex compiler (i.e. only by loading various components).

  2. esset says:

    Another suggestion:

    1. Designer/Artist creates sketch (paper or Photoshop)

    2. Developer implements sketch (codewise).

    3. Designer can change implementation directly, with only a few limitations.

    Reiterate steps 2-3.

Leave a Reply