The Design Cannon

Game Development Job Positions for Graduate Students

2012-02-01T12:04:00.000-08:00

I am taking a class about video games in order to develop interactive design skills specific to video games. I have been an avid gamer since I was a teenager, and I enjoy a wide spectrum of games from casual games to classic point-and-click adventure games to single-player role-playing games to massively-multi-player MMO’s. I am interested in creating educational video games for museum exhibits and websites. Video games are some of the best examples of interactive design in the field. Games are a great way to engage people in fun and meaningful ways.
For graduate students looking to get into the game industry, there are many entry-level jobs that enable them to get a foot into the door. One of these is I.T. support. I.T. staff are responsible for maintaining computers so that the artists, programmers and engineers can keep doing their jobs. Quality assurance is another entry-level position. Q.A. testers test the games for bugs and glitches. They play the games systematically, exposing issues that the programmers may not have expected. Another entry-level position to consider is render wrangler. Render wranglers monitor and control the computers where rendering is being done and manage the render farm. They continually check the machines so that the artists don’t waste time on technical issues and watching render output, even working 24-hour shifts.
There are also entry-level programming positions in most game companies. Programmers tend to specialize in different areas: network programming for online play, security, graphics, A.I, interface programming, engine programming, database, game play and optimization programming.
By obtaining an entry-level job, a person has a chance of moving up into a higher position. Engineers are more experienced than programmers; engineers create the structure of the game as well as the tools that the artists and level designers use to design the game. Higher-level jobs can open up in the art department as well. The art team creates the look and feel of the game and user interface. Positions here include concept artists, 3D-modelers and animators. I like coming up with the ideas for games and designing user interfaces, so this area appeals to me the most.
A person might even move up to a management position in the engineering or art department. The engineering manager and art director in turn report to the producer or production manager. This person oversees the entire production of the game, communicating between the artists and the programmers. He or she creates schedules and prioritizes tasks for the art and engineering teams, keeping a clear picture of the shape of the game. This person also knows a lot about game design, and usually some programming and art skills.
The marketing department holds additional roles in a game design company. The marketing department creates the image of the company that the public sees. It is responsible for promoting the company’s image and products. They develop marketing campaigns, create ads, websites and more to generate public interest in the games. I do have some experience in marketing, and I am very aware of the role of marketing in a game’s success. I have come across several great games that suffered from poor marketing: Okami and Beyond Good and Evil. Both are exceptional quality games. Sometimes game sales can suffer if a less-known title is released among many blockbuster titles. Sometimes a good game doesn’t get enough publicity. The marketing department has many factors to keep track of.
Some marketing departments may have a user community administrator. This person interfaces with the public via the company website. He/she manages the forums on the company website or other user communities related to the company’s products, and gathers feedback.
Business administration is an area unto itself. Several roles in a multi-department game design company lie in business administration. Accountants track and maintain the company finances. In a small company, a certified public account may be hired for these tasks. A lawyer may be retained for the company, or it may have it’s own legal team. Copyrights, trademarks and patents are issues that all game companies must deal with. The lawyer or legal team protects the company’s intellectual property from copyright infringement and ensures that the company is not violating others’ copyrights. Although these aren’t the roles most game design students see themselves in, these functions of a game company are worth noting.
At the very top of the corporate structure of a game company–other than a sole proprietorship or partnership–presidents, general managers and CEO’s oversee the company. They have strong interpersonal and organizational skills and keep projects on track. They either have business management experience or years of specialized knowledge and skills related to the industry. I do not see myself in a management role in a game company. If I create a company, I see myself as the sole proprietor.
There are many aspects to game development, reflected by the different departments–engineering, art, business administration–and corporate hierarchy. A graduate student may be able to find an entry-level position in his or her desired area, or start off in a support position such as I.T. or Q.A. Filling one of these positions may help him or her land a higher position in the company. I don’t see myself working for a large company but it’s important to understand the structure of companies that I may be working with. Someday I may wish to create games of a larger scope than I can handle all production of myself.

Print Section Massively Updated

2011-07-15T12:37:00.000-07:00

I have created a lot of print projects for the Pacific Northwest Section PGA since late 2010. I have added 7 of them to the site, encompassing a wide variety of pieces from book covers to flying banners. Check them out!

Redirecting Old Site Pages to New WordPress Site

2011-06-14T14:14:00.000-07:00

Do you know how many sites link to your old sites' pages? Is your site referenced in Wikipedia? Do you want to keep your old site's search rankings? Then you'll probably want to do a 301 (permanent) Redirect. You do this by creating or editing your site's .htaccess file.

Your WordPress site probably already has a .htaccess file. I copied mine to my local machine and underneath this:

# BEGIN WordPress

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

# END WordPress

I followed this guide and added this below:

redirect 301 /chapters.htm http://www.pnwpga.com/chapters

... etc. until I'd included all the important pages from the old site and their new equivalents (one on each line).

I uploaded the new .htaccess file and saved it over the existing one in my site's root folder. All the redirects are working perfectly! Now I don't have to worry about breaking links on external sites or losing pnwpga.com's good search rankings.

Free Frutiger without Piracy

2011-05-06T09:10:00.000-07:00

If you're like me, you feel guilty downloading pirated fonts. Font designers are artists, too, and they deserve compensation for their work. To turn around and use their work, without license, in your own commercial work is just wrong. However, fonts by major type foundries are expensive. Is there some way to legally acquire fonts for free? I've been on the lookout for such opportunities, and learned that sometimes fonts come bundled in with software--software that you can download, legally, for free.

To legitimately obtain the font family Frutiger, you can download Microsoft Reader from the Microsoft website. What is Microsoft Reader? Who cares. Frutiger is a beautifully simple sans-serif font designed by Swiss type designer Adrian Frutiger. It was commissioned in 1968 for the directional sign system in the newly-built Charles De Gaulle International Airport in France.

Flash AS3 Tutorial: Keyboard Class

2011-04-17T21:00:00.000-07:00

In this tutorial, I will be taking the Pong demo from Week 3 of class and will be changing the paddle to be keyboard-controlled instead of mouse-controlled.

1. First let’s talk about the Keyboard class. “The Keyboard class is used to build an interface that can be controlled by a user with a standard keyboard. You can use the methods and properties of the Keyboard class without using a constructor. The properties of the Keyboard class are constants representing the keys that are most commonly used to control games.” (Action Script 3.0 Language and Components Reference).

2. Make a new folder called “keyboard demo”. Create a new ActionScript 3.0 FLA file in Flash and save it in the folder as “keyboard.fla”. Create a new AS file and save it in the folder as “MoveWithKeys.as”. Give keyboard.fla the class “MoveWithKeys” .

3. Now let’s get a paddle to move. Create a paddle on the stage and make it into a movie clip, or copy the paddle from m3_pong.fla’s library and paste it into keyboard.fla’s library. Here you can see the paddle movieclip in my library.

4. Instead of storing the paddle on the stage, let’s make it into a class that can be called dynamically into our application. Check the box to “Export for ActionScript”. Here’s my symbol properties for the Paddle class:

5. Add an instance of the paddle in the Actions for keyboard.fla. Here is my code:

6. Now let’s work on the MoveWithKeys class. For our class, we will need to import parts of the Flash ui into our package: flash.display.MovieClip, flash.events.KeyboardEvent and flash.ui.Keyboard. Let’s just get all Flash events while we’re at it, too, in case we need them later.

7. Here is the rest of the code, which I adapted from the Adobe help site.

7a. You can specify how many pixels to move the paddle. “ -= 5” will subtract its position on the stage by 5, and “+= 5” will add to its position on the stage by 5.

7b. switch and break statements are similar to if/else statements. If the conditions of switch are true, the code will be executed until the break.

7c. The evt is an instance of the keyboard event that was created when the key is pressed. You can use any name you want in the place of evt. The colon and the word “KeyboardEvent” indicate the type of event. “event” would also work; “evt” is commonly used because it is not a reserved word in Flash.

8. Save and test keyboard.fla. Output will show our trace message “function fired”, and you can now move the paddle left and right with the arrow keys on your keyboard!

9. Now to put this to use in our pong file. Copy your m3_pong file and paste it into the keyboard demo folder. I renamed mine “m3_pong_keyboard.fla”. I copied my paddle class from keyboard.fla and pasted it into the library of m3_pong_keyboard.fla and removed the paddle instance from the stage. Assign the document the class “MoveWithKeys”.

10. We don’t need the code for the paddlePressHandler or paddleReleaseHandler anymore, so rip all reference to those out of the Actions, and add in our new paddle code. I positioned my paddle a little higher than in the keyboard.fla test so that it wouldn’t hit the reset button or the score area. Don’t forget to remove the references to paddlePressHandler and paddleReleaseHandler at the bottom of the Actions code, too.

11. Test to make sure everything is working! You should now have a pong game where you control the paddle with the LEFT and RIGHT arrow keys. If it moves too slowly for your taste, increase the value of “case KEYBOARD.LEFT paddle.x “ and “case KEYBOARD.RIGHT paddle.x”.

12. Notes:

12a. KEYBOARD.UP and KEYBOARD.DOWN are also commonly used.

12b. Public properties of the KeyboardEvents:

Public property - Data Type
altKey - Boolean
charCode - uint
ctrlKey - Boolean
keyCode - uint
keyLocation - uint
shiftKey - Boolean

12c. The primary difference between the key code and character values is that a key code value represents a particular key on the keyboard (the 1 on a keypad is different than the 1 in the top row, but the key that generates “1” and the key that generates “!” are the same key) and the character value represents a particular character (the R and r characters are different). Useful link for finding keycodes: http://www.dakmm.com/?p=272

Sources:
1. Adobe ActionScript 3.0 website: Capturing Keyboard Input: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d01.html
2. Edutech wiki: AS3 example Keyboard control: http://edutechwiki.unige.ch/en/AS3_example_Keyboard_control
3. Grover, Chris. Flash CS5: The Missing Manual; O’Reilly, 2010

Successfully moved WordPress blog from localhost to web server

2011-02-11T11:36:00.000-08:00

I did it! I successfully moved a WordPress blog from localhost, where it was running on my XAMPP/Apache setup, to the web server. There are already a ton of guides on how to do this, so I won't go into the details here. The only problem I ran into was that my permalinks were messed up. By messing with it (I changed the permalinks from my custom structure back to default, and then set up my custom structure again), I was able to get everything to work.
Now, eventually I'd like to change www.marlenacannon.com into a WordPress site but for now I'll just leave it as my web design sandbox, where I get to test out all the neat things I'm learning in school like PHP templating. And Flash!

Motion Graphics Inspiration

2010-09-06T21:10:00.000-07:00

Last Heist EP is a 2010 album from Impactist (Portland duo Kelly Meador and Daniel Elwing). They created four uniquely genuine short animations for each of the four tracks on the album. Here are my impressions:
Spheremetrical (Here With You) - To me, this is the story of two personalities. They may be circles with triangles for mouths, but they seem very humanlike. And I think a lot of us are familiar with the "yes. no maybe," situation that can happen when you start a new relationship. Interpretations aside, the track begins with geometric shapes gliding along to soothing acoustic piano. It picks up with the addition of electronic sound, and the animation becomes truly exciting when one of the circle personalities transforms into a sphere, with other three dimensional shapes popping out of the two-dimensional background.

The Magical Number Seven - Grainy black and white footage of birds flying in a Northwest wilderness area is accompanied by a soothing, merry electronic melody. Soon the footage reveals that we are actually near a town, with boats and piers and logging mills, while the music picks up and flashing, solid-colored geometric shapes are transposed over the film. It becomes truly mesmerizing as dotted lines and shapes are drawn around birds and objects behind them, with the effect of partially cutting/peeling them out of the film. I see colored shapes, seven in all, playing in a black and white world.

Micrhomage (Community) is a very brief film of organizations of organic and geometrical shapes. "A micro promo that serves as an homage to the artists that inspire us. Hence, it's a Micrhomage." I wish it were less micro and went on longer.

Looking for You - Another soothing, melodical electronic track tinkles away to background footage, this time of the Mars Rover camera. Looking for you... who seems to be located at the pyramid on Mars, because that's where I feel the rover is headed to based on the interspersed images of pyramids. Another geometric theme.

I found these four short films very inspiring. I would love to do something like this, especially The Magical Number Seven, in Flash or After Effects. I got a pretty good introduction to Acid Pro 7 and creating electronic music last semester, so I could try to come up with some music too.

Connect Access Database to MySQL Database?

2010-08-24T13:17:00.000-07:00

A company I work for has a lot of information stored in Access Databases. Ideally, we want this information on the web server so we can dynamically display tournament scores, points standings and more. So is there a way to connect a Microsoft Access database to a MySQL Database?
The answer, I found quickly, is yes.
I couldn't export the table data right away from my Access table, but after downloading the Connector/ODBC from the MySQL dev site, and following these simple instructions on the same site, I was able to connect to the MySQL server set up on my localhost with no problems.
This is exciting because now my company can use Microsoft Access as a front-end to our MySQL servers on our website.

Finally Seeing the Benefits of Dreamweaver

2010-08-23T09:33:00.000-07:00

I was never a big Dreamweaver user. Since 1999, when it was a Macromedia product, I used it as a glorified Notepad. Dreamweaver was always just a spell check for my code. I never learned how to make Dreamweaver sites or use Dreamweaver templates. It just didn't seem that helpful and I preferred to code by hand in code view. Upgrading from Macromedia Dreamweaver MX to the Adobe CS5 version seemed like kind of a waste, but I needed the new Photoshop and Illustrator.
This weekend I finally learned about setting up a PHP environment in Dreamweaver. Using XAMPP, and my sites set up in Dreamweaver, I can now work entirely locally before I'm ready to upload to the server. This beats working in my "test" folder on my hosted site. This also saves me from accidentally torching my real database while working on a new app, such as my portfolio updater app that I'm working on for marlenacannon.com.
Bonus: Set up the FTP information for the site in the "Remote Info" option of the Dreamweaver site manager options, and you can bypass having to use Filezilla to manually send updated files to the web server.
Dreamweaver, I'm finally seeing the benefits for a design person who also works with PHP and MySQL and doesn't need a WYSIWYG editor.

My life just got easier thanks to XAMPP

2010-08-19T10:55:00.001-07:00

I decided to set up PHP5, Apache and MySQL on my localhost, so I could develop a new database-driven website completely offline. I could not seem to get these things to play together nicely. A friend recommended XAMPP, a nice little Apache distribution containing MySQL, PHP and Perl. After I removed my current MySQL instance, XAMPP worked like a charm.

Then I decided to install WordPress. Using XAMPP, I was able to easily access phpMyAdmin and create a database for WordPress. But where should I install the WordPress directory so everything would work nicely? A simple Google search led me to this tutorial and within minutes my new WordPress site was installed on my localhost.

Life can be easy sometimes.

Best CSS Resources Part I

2010-02-03T09:17:00.000-08:00

There are some resources on the web that I come to again and again for CSS reference. I'm going to list my favorites here. Hopefully you already have these bookmarked--none are that new. If not, here's a chance to add these to your list of resources.

1. AlsaCreations: http://www.alsacreations.com
This site is in French, but a lot of articles and tutorials are also translated into English. Here is where I first learned hack-free CSS-driven menus that work in Internet Explorer and Mozilla Firefox.

2. Dead Centre: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Positioning in CSS was somewhat of a mystery to me until I found this website. The simple working diagram was one big "aha!" moment for me.

3. Accessible CSS Forms: http://www.websiteoptimization.com/speed/tweak/forms
Even when I had freed myself from using tables for layout design, I was still relying on tables to format my forms. After viewing this site, I now have no excuse to use tables anymore for anything other than data.

4. CSS Zen Garden: http://www.csszengarden.com
Beautiful examples of how versatile CSS-driven layouts can be.

5. Equal Height Columns Using CSS: http://www.ejeliot.com/blog/61
This blog article changed my life. Finally, equal height columns without any tables or JavaScript.

6. Maximum and Minimum Height and Width in IE: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer
This Perishable Press article is a great way to get around issues in IE without resorting to JavaScript.

These are the six sites or articles that taught me the most about creating valid, CSS-driven sites. If you don't have them bookmarked yet (I do on Delicious), what are you waiting for?

Happy New Year!

2010-01-25T21:58:00.001-08:00

Welcome to the new version of the Marlena Cannon Design website. Throughout 2009, I learned a lot of new information about web accessibility and web design standards. The new Marlena Cannon Design website features streamlined navigation across the top of the site, with plain text links at the bottom of the site. The site is less wide, but more organized. I took down a few sections in the organization process. A new section, Animated Media, will be coming soon. Also, I have updated the Web Portfolio and Print Porfolio sections with several new completed projects. I feel that the new design reflects my growing experience as a web designer.

Also, I will be taking on a full-time job as a web designer in January 2010. This means that I will have less time to work on freelance projects. I will, however, be updating the site with projects completed for my web design classes at the Academy of Art University.

Happy 2010!

Print Section Now Open

2010-01-25T21:46:00.000-08:00

My experience in design is primarily with the web, with some flyer and ad design, but I’ve been honing my InDesign skills and recently completed several new print projects. Please check out http://www.marlenacannon.com/print.php to view a few of my latest projects.

I learned a lot about getting transparencies to print correctly, about matching color profiles, and about the standards that different printers have for the files they receive. I got frustrated once or twice, and here a few of the resources that really helped me out:

Dealing with Transparency in InDesign and Illustrator (pdf)

Designer’s Guide to Transparency

My experience in taking design to print has expanded greatly!

On a side note, I learned that “flyer” and “flier” are both acceptable spellings for the same thing. “Flier” is entered first in the dictionary, meaning it is the preferred spelling, but it seems to look better spelled “flyer.”

I Love Flash Templates

2010-01-24T14:46:00.000-08:00

Now, I mostly use Flash to make animated media and web site intro movies. I learned basic ActionScript, but when it comes to Flash development I'm more of a tinkerer than a developer. That's why I love free Flash template websites, such as http://www.flashmo.com. It's like getting a Lego set. All the pieces are there--pre-built, even. But I get to poke around in the Actions and change the colors and content to suit my needs. With so many great Flash developers out there, it hardly seems worth it to build my own Flash site from scratch. However, I do prefer the Flash templates that are more complex and require knowledge of Flash and ActionScript, as I find them more robust than simpler Flash templates.

What about Flash sites that do it all, like Wix? I haven't tried the site builder tools myself, but I've browsed through quite a few of the sites that others have made. A lot of them look good, but are kind of clunky to use. A Flash site still needs a consistent menu that can take you to any of the pages on the site. Also, a lot of these sites begin with an "Enter" page. That is so outdated! Don't make your user make an extra click just to "Enter site." It is far better to make your intro movie smaller and part of the layout than to devote a separate portal page to it.

For accessibility reasons, it's probably best to integrate Flash elements into your site rather than make a site completely in Flash. But Flash sites can look so good! And that's why Flash templates are a guilty pleasure of mine.

Now with 100% More Shine

2010-01-11T23:16:00.000-08:00

I love the concept of Web 2.0. If you're not sure exactly what that is, Wikipedia sums it up nicely: "a perceived second generation of web development and design, that facilitates communication, secure information sharing, interoperability, and collaboration on the World Wide Web."

I especially like the collaboration part, and focus on the users:

Creative Commons: http://creativecommons.org

Wikipedia: http://www.wikipedia.com

Wordpress: http://wordpress.com

However, I am totally sick of some of the design concepts of this second generation of web design. Please, no more shiny, bubbly sites like these: 50 "Excellent" Corporate Website Designs".

Ridiculously large graphics: While beautiful, I really hate how enormous the graphics are on these sites.

Identical layout: Huge graphical section on top 2/3rds, bottom 1/3 usually an isolated, plain area with mini blurbs and links to the actual content.

Reverse text: We can't all copy the Apple website design, people.

Gradients: Seems we mustn't use a solid color when a gradient will do.

Gloss: Every button has a glossy visual effect. In fact, most graphics in general do.

Wispy vector graphics: Swirls like liquid motion.

I think it's OK to use a few of these design ideas on a web site. In fact, I use gradients quite a bit on my design site, Marlena Cannon Design. But I really value a site design that looks unique. Too many sites following too many of the above trends tends to make them all look the same. I admit, I was annoyed when I saw what Webdesigner Depot had picked as their top 50 corporate sites. They looked like they were all made from the same template!

Also, I really don't think the bubbly web style is fitting for most professional, corporate sites such as bank sites, health care sites, etc. YES for music sites, design sites and mobil phone marketing sites. NO for sites that require users to do more than just gaze upon the beautiful marketing.

Go ahead, fellow designers! Use the shine and the reverse text and the gradients! But don't just copy what Apple and everyone else have already done. Create something unique. And always keep the user in mind. Is it appropriate to have a graphic that takes up 2/3rds of the browser window? Does the user want to see that? Maybe they do. Maybe they don't (I dare you to try to book a ticket on the Southwest site).