Not long ago, this knocked on my door and I suddenly found myself working towards making performance a concern of the game team as a whole. I think it was a nice challenge and a very rewarding experience…Because of this is that I decided to write this article about how my company coped with the challenge of  ”Optimizing the Artists”. I hope readers can find some interesting insights on the subject.

The Problem:

As I wrote in older posts, performance in Flash is closely tied to graphics rendering. Code performance is quite inconspicuous when compared with the bog-downs that heavy graphics can cause.

In the industry I come from, game artists are usually recruited from the lines of graphic designers and illustrators accustomed to working in advertising, logo design or web  -sites-. The same goes for animators. They lack of experience in working with developers and especially with game developers that usually take -or should take- performance very seriously.

Art teams are usually preocupied with the quality of the art, so sadly it could never occur to them that detail and graphical quality has its downsides on the game’s performance. Since quantity of nodes in the vector graphics or size of bitmaps are variables that can only be controlled from the art perspective, Art is indeed part of the performance problem…

Games have its own rules, and one of these is that the game must run smoothly at least. Websites and billboards obviously don’t need this kind of attention. As the ones naturally worried about performance, we developers usually find ways of optimizing graphics from the code side (blitting, rasterization, dirty rectangles, etc), but there comes a pint in which nothing we do seems to suffice, and performance becomes a very time consuming and mind boggling business. When this happens, we must look to the opposite shore, and seek help…

We must find ways of convincing the art team into hopping aboard the performance optimization train so that performance handling in the project will become a shared responsibility and a general concern, so Art becomes part of the solution.

The solution: Educating your artists:

From the company’s perspective, the objective of the education must be to build an art team that has both the knowledge and resources for tackling the most common performance problems. In line with this, the fact that bad game performance affects them as well cannot be stressed enough, and they will quickly understand where and how it affects them once they grasp the very basic concepts. After this is achieved, the art team alone may be capable of finding its own solutions and actually generate the know-how for better performing but still detailed art.

Hands on the problem:

Art people are usually cool and laid back (at least those I know), so approaching them with technical terms and performance charts can be extremely difficult. Most of the artists in my company had little to no industry experience at all, and the concepts I needed to pass through were at times too far-fetched. When I started with this “crusade”, I thought I was doomed to failure in advance, with no chance of success. The first step of the road was therefore to convince the people who cared that performance was important and that there was much to be gained from optimizations on the art side. The first ones to understand this will always be the ones on the Dev side, so I started there and then luckily everything started moving towards the art side, pushed by the tech leads.

Eventually, the thing reached someone with authority and knowing performance was made kind of mandatory by the company, so my “educational” approach became simple and straightfoward…I wrote down the important stuff in a powerpoint and prepared an improvised set of performance talks to go over the points and dissipate doubts and concerns. This kind of “structured”, lecture-type talks were needed because of the large number of people that needed to hear this (80+ artists), so it even required several talks. I would have personally preferred something more informal and/or dynamic. In smaller groups just talking about it individually with them, or with the lead artists should work wonders.

This, however, does not end with the performance talks. The most important part after spreading the word and teaching is the follow-up. Without control, all the talks will be ephimerous and the concepts will wash out of the Artist’s minds quite quickly…If the concepts are not applied and field-tested, all the effort will be nullified. One must keep talking about it, measuring, profiling, answering questions, etc. Until one day it starts to walk on its own, and BAM! you got your professional team of Game Artists!  this may not do away with the ever-present performance problems, but now you will have the power of teamwork and the know-how of people that come from a very different background on your side…

Ill have to write about this subject again to either confirm or throw my theory to the trash can, depending on how it evolves, for we are still in the “measure, profile and talk” phase.

Cheers!

In already-finished proyects, the largest(and easiest) performance gains in Flash are to be made by adjusting the overall quality of the renderer, because this practice doesnt require to change anything inside the proyect.

In the ideal case, Quality settings should be left in the highest possible setting so the app would take advantage of flash´s clear and well-defined graphics, Therefore lowering the overall quality must be a last resort after all other possible optimizations have been done.

Flash quality adjustments affect primarily image Anti-Aliasing(covered next), which is a time consuming but rewarding visual effect applied to everything that Flash renders.

NOTE: Flash´s default display quality is “HIGH”;

Flash Anti-aliasing:

Anti-aliasing(AA) works in the same way for flash as it does for other applications. It consists in a complex process of adding mid tone pixels to the jagged edges of images or text so the human eye will perceive a smoother image instead of jagged lines that look like a ladder.

In this process, the platform calculates the pixels that are on the edges of lines and “smooths” them by adding more pixels of different colors (usually an average between line color and background).

Highest levels of AA in more complicated applications even tune alpha values in these pixels to further increase the (apparent) quality of the lines. Complicated as it is, this process is costly for the CPU, and adds lots of work to the rendering cycles. This applies to both image and text rendering.

Anti-Aliasing (quality) levels:

•StageQuality.LOW—Low rendering quality. Graphics are not anti-aliased, and bitmaps are not smoothed.

•StageQuality.MEDIUM—Medium rendering quality. Graphics are anti-aliased using a 2 x 2 pixel grid, but bitmaps are not smoothed.

•StageQuality.HIGH—High rendering quality. Graphics are anti-aliased using a 4 x 4 pixel grid, and bitmaps are smoothed if the movie is static.

•StageQuality.BEST—Very high rendering quality. Graphics are anti-aliased using a 4 x 4 pixel grid and bitmaps are always smoothed.

Back to series Index!

When you ask Flash to use cacheAsBitmap on an image, it stores a copy of the vector image´s point array in memory (for swapping), but uses a converted version (converted to bitmap) for rendering, so the vector image doesnt need to be calculated and redrawn every frame. Thanks to the saved point array, display objects can be swapped to and from bitmap format as much as one needs.

USAGE: Use on complex vector images that don’t transform, for example complex background images (moving or not), non-animated sprites and most user interface elements.

ADVANTAGES: Bitmaps, unlike vectorial images, are not recalculated on every frame by the flash player unless they suffer a transformation. Thanks to this, cacheAsBitmap allows for some performance gains when handling static and complex vectorials.

WARNING: Animated (transforming) objects are going to be redrawn regardless if they are bitmaps or vectors, so using CacheAsBitmap on animated Sprites or MovieClips would actually make it slower than a vector, forcing flash to recalculate the vectorial image, redraw it, save it and get the bitmap copy done once every frame for as long as the object is being changed internally.

Back to series Index!

Vectors are mathematical representations of images and they store only numerical values needed to draw the image from scratch, and therefore have the advantage of being very small in size, which is very useful for saving bandwidth.

The problem with vectors is that all advantages in size then become disadvantages in processing requirements. The format of vector images means that flash will draw the image from scratch in each rendering cycle (frame). This is an increased load if you compare it with bitmaps:

Flash has to calculate the vector´s nodes and resolve pixel positions in addition to drawing pixels in their places. With Bitmap Images, only the latter is done, and therefore less processor time is consumed in the rendering cycle. You can improve this through AS3 by using the CacheAsBitmap flag in DisplayObjects. This will require flash to calculate the pixels only once, and then (as long as the vector doesnt change) draw it as if it were a common bitmap image. More on this on the next section.

Scaling:

We know that scaling bitmaps is avoided at all cost by Flash developers because of the serious loss of image quality it brings.

On the other hand, we know that scaling a Vector image is very easy to do and there is no loss of quality. In fact, because Vectors are rendered at runtime, you can scale a vector to be many times larger than its original size and still have defined lines and good looking color fills.

All this definition has its price in terms of CPU consumption, and the larger the amount of scaled vectors on-screen is, the bigger the burden on the Processor will be. Keep this in mind when scaling vectors: some is O.K., but f you need to scale the whole stage, consider redrawing the vectors or scaling its individual internal parts.

Back to series Index!

Generally, the performance bog-downs in Flash are reduced to how much is being rendered at a specific moment, namely, what percentage of the screen is being redrawn. The larger the size of the screen, the larger the quantity of pixels that flash has to redraw each frame, so in all aspects, a 800×600 flash app will be slower than a smaller one.

Apart from this, the size of independant redraw regions will also influence the performance rates. This means that in some cases a complicated but small image(a small star or a drawing of a person) may be easier for flash to render than a much simpler but much larger shape ( maybe a square or rectangle). Also, rendering small things in the edges of the screen could potentially enlarge the general redraw region, giving flash more work to redraw a whole frame.

Because of these two things, it is always a good practice to keep both overall app. Resolution and redraw region sizes as small as possible, as well as trying to avoid animations & effects on the edges of the screen.

Back to series Index!

Flash will always draw anything that is visible, even if its alpha value is 0. This is why alpha values lower than 1 usually add a lot of work for the processor, because Flash will draw everything behind it. This includes all filters that involve Alpha, such as blur, blending and glow filters.
This next paragraph is an extract of Adobe Documentation about Filter performance:

“The type, number, and quality of the filters you apply to objects can affect the performance of SWF files as you play them. The more filters you apply to an object, the greater the number of calculations Adobe® Flash® Player must process to correctly display the visual effects you’ve created. Adobe recommends that you apply a limited number of filters to a given object.
Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings improves performance on slower computers. If you are creating content for playback on a wide range of computers, or are unsure of the computing power available to your audience, set the quality level to Low to maximize playback performance.”

As practice, avoid their extensive use, and when you need to use some always try to to apply them in small screen portions and with the lowest possible quality. Evaluate werther an object could be removed instead of being left with low alpha, or if certain effects could be ruled out / done in other ways without compromising the visual aspect too much.

NOTE: whenever you apply a filter to a displayObject through ActionScript, Flash automatically sets the cacheAsBitmap flag to true (more on this on later articles).
Back to series Index!

These tips and tricks Ive collected from many flash blogs, forums and even the Adobe documantation have been quite useful, this is why I feel its time to share them to anyone that may want to use them. This is the ultimate Purpose of this guide.

The guide itself is a compillation of AS3 tidbits and well known flash performance tips that I grabbed from around the web. In addition to this, there are many code examples and tests/banchmarks that I made to confirm the theory and to help me understand how big was the performnce gain in certain cases.

I have material for a rather long series of small, specific articles, so Im getting started right away. My intention is to divide the series in two groups: AS3 code and Flash Graphics.

Flash Performance Series:

Graphic performance:

1. Alpha Values & filters.
2. Resolution and Redraw regions.
3. Vectors & Bitmaps.
4. Using cacheAsBitmap.
5. Quality Adjustments.

Code performance:

1.AS3 Loop performance.

Considerando que tengo mucho material escrito en relacion a progamacion en ActionScript 3, decidí dividir la seccion en inglés y castellano. Mi idea es subir rápido aquel material que está en inglés (escrito por mi, a menos que se indique lo contrario) e ir traduciendolo a medida que tenga tiempo…obteniendo, a la larga dos secciones gemelas en inglés y castellano.

English:

Cosidering the amount of material I wrote about ActionScript 3 in the English Language, I´ve decided to split my Blog´s AS3 section to accomodate both an English and a Spanish version. In this way, I can Upload my english content right away and start translating them to spanish when I have time. The ultimate objective is obtaining two identical sections for the spanish and english versions.

Saludos! Cheers!

Santa.

GRAFICOS: 8/10

Gráficamente el juego es muy bueno, este es un de los aspectos que mas resaltan desde el comienzo. las cinemáticas son de muy buena calidad y los gráficos in-game van bastante a la par, todo lo que son brillos y texturas están bien hechos y los terrenos son bastante convincentes. En lo que a interfaz y perspectiva de 1ra persona respecta hay mucho efecto y mucho detalle. Lo malo es que quizas las explosiones son un poco agobiantes cuando se suceden rapidamente, me ha pasado de estar dentro de un tanque y ver como explotaba constantemente debido a unas granadas que no hacian daño pero que si nublaban toda la pantalla…ya he visto gráficos de calidad en Crysis y a pesar de tener muy buenos graficos, Section 8 no mejora realmente ningun aspecto de los que ya se podian apreciar en este otro titulo y otros con graficos similares.

CONTEXTO:2/10

El juego está ambientado en un futuro en donde el “Imperio de Estados Unidos” lucha contra enemigos genéricos por el control de una serie de territorios en planetas lejanos, o no.  Los soldados de la seccion 8 son la punta de la lanza en los asaltos de USA en los distintos teatros de combate, y son llevados hasta ahi por grandes flotas de naves espaciales. No hay muchas pistas sobre por qué luchamos, o contra quien (al menos no en la primera mitad de la campaña) lo cual hace que el juego sea un poco soso. Sé muy bien que tengo que matar a los rojos, pero  no se por qué. Tampoco se gastaron en diferenciar mucho los bandos, ni tecnológica ni visualmente, asi que eso contribuye a la planicie general en terminos de contexto, teniendo meramente una lucha de “azules” contra “rojos” (que novedad!).

JUGABILIDAD:6,50/10

El juego es bastante rápìdo y dinamico, siempre saltamos rapidamente a la accion sin mucho preambulo, la escueta historia se desarrolla poco y nada durante el juego por lo que es pura accion todo el tiempo. Sumado al mas que modesto(aunque sin muchas novedades) arsenal de armas, en Section 8 tenemos unas cuantas habilidades especiales que nos da la super-armadura para ponerle un poco de condimento a la accion. Entre estas habilidades se encuentra la de saltar y utilizar jetpacks para flotar unos segundos en el aire y la de correr extremadamente rapido por el campo de batalla. Si el enemigo nos mata, volvemos a entrar al campo de batalla siendo arrojados desde el cielo, cayendo como paracaidista, solo que sin paracaidas (una bonita sensacion, esta muy bien logrado).

Las misiones son muy lineales y sus objetivos consisten en atacar, defender, capturar y “hackear” terminales. vamos simepre con nuestro escuadron de super-soldados y en algunas misiones tenemos acceso a vehiculos como tanques pesados y a algunas construcciones transportables como torretas o puntos de suministro para ayudarnos a cumplir los objetivos.

La interfaz que nos muestra los objetivos y que nos marca un monton de cosas en pantalla es muy informativa…demasiado, de hecho. Los marcadores de enemigos, en particular, llegan a ponerse bastante molestos cuando hay muchos enemigos volando por todas partes y no nos dejan apreciar la parte gráfica del area de juego al 100%.

CONCLUSION

El juego está claramente orientado al juego en internet/red con otros jugadores ya que en el single-player los objetivos se tornan repertitivos y aburren rapido. No los culpo, quizas fue una decision de los desarrolladores privilegiar el multiplayer por sobre el contenido offline para enganchar a los “consoleros”, pero claramente eso no atrae jugadores de mi tipo. Para el fanático del juego online que no repara en la campaña single-player quizas este titulo valga bastante mas que para mi.

PUNTAJE: 5,50/10

Game modes:

CTF: o “capture the flag” es el modo clásico en el que funcionaba en Team Fortress Classic. En esta edicion el modo sigue igual. El clásico modo en que dos equipos se enfrentan para capturar la bandera del contrario y llevarla a su propia base o punto de captura. El unico cambio que se nota aqui es qu la bandera ha sido cambiada por un portafolio con iformacion clasificada, que hay que robarle al enemigo, aunque no cambia el concepto. Una cosa muy divertida que agrega un poco de novedad al modo es que el protafolio va dejando un reguero de papeles tirados una vez que es robado, asi se le puede seguir mas facil a aquel que lo robó  siguiendo el caminito de papelerio que deja el jugador en cuestion. El mapa mas famoso de TFC, “2Fort”, ha sido recreado para la version actual del TF y pertenece a esta categoria de CTF.

CP: o “capture point” es un modo de juego en el que principalmente hay que capturar uno o mas “control points” para vencer al enemigo.  El equipo que logra capturar los puntos en el mapa gana la ronda. Este modo de juego tiene dos sub-modos:

El primero y mas simple fue introducido con el TF2, se juega en un unico mapa en donde hay 3 o 4 capture points y los dos equipos deben avanzar para capturarlos. El balance es bastante bueno ya que aunque un equipo sea malo defendiendose, el equipo que captura los puntos queda cada vez mas lejos de su objetivo a medida que avanza por el mapa, con lo cual os ultimos puntos de control a conquistar quedan bastante lejos del punto de inicio de los jugadores, y le da oportunidad al equipo que esta perdiendo, ya que ellos quedan bien cerca de su ultimo punto y pueden llegar mas rapido. Esto es lo mismo que decir que cuanto mas lejos se llega, mas fuerte hay que empujar. El mapa “cp_granary” es un buen ejemplo de este modo.

El segundo modo, y el que mas disfruto,  viene desde el Team Fortress:Classic y se juega en una serie de mapas continuados. En “cp_dustbowl” (tambien un remake de TFC) hay dos puntos de control por cada mapa, el equipo azul ataca y el rojo defiende. El equipo defensor comienza conrtolando ambos CP´s y el azul debe conquistarlos para avanzar. Esto se repite en tres secciones distintas del mapa (lo que es lo mismo que tres mapas distintos o sub-mapas, que forman parte de un solo mapa mas grande).  Si el equipo defensor logra retener los CP´s por una cantidad determinada de tiempo, el equipo atacante pierde la ronda y se intercambian los equipos(el atacante pasa a la defensa y viceversa). Cada vez que el equipo atacante captura un  punto, el tiempo disponible para la captura es extendido. Si elequipo atacante logra todos sus objetivos se le añade un punto y se intercambian los roles.

PAYLOAD: “Payload” es un nuevo modo de juego en el que se obtiene la victoria empujando un carrito lleno de explosivos por una vía de tren hasta la base enemiga, haciendola explotar en mil pedazos. Lo interesante de este modo es que el carrito no puede(en la mayoria de los casos) ser empujado hacia atrás, por lo tanto el equipo atacante puede hacer una serie de ofensivas fuertes empujando el carro un poco en cada una hasta la victoria o intentar una ofensiva continua empujando el carro constantmente. Se presta a muchos estilos distintos, dependiendo del equipo. Otra forma de juego en este modo “payload” es en los mapas en los cuales ambos equipos tienen su carrito y deben cumplir el rol ofensivo y defensivo al mismo tiempo. mientras en el modo tradicional un equipo ataca y otro defiende, en el modo “race” ambos equipos corren una carrera para ver quien logra llevar el carrito a destino primero.

Además de estos modes y mapas oficiales, hay muchos mapas creados por usuarios que se usan mayormente para CTF y Arena (en arena ambos equipos pelean hasta la muerte, y los jugadores no pueden revivir hasta que termina una ronda…cuando todos los jugadores de un equipo mueren, termina la ronda y gana el otro equipo).

Este es el fin de la parte 2 de la reseña sobre Team Fortress 2, en la tercera y ultima parte voy a hablar sobre los “goodies” del juego que no hacen al gameplay en si, pero agregan mucha jugabilidad y variables al juego online.