Simplify and Expedite Front-end Web Development

February 24th, 2012 by Kyle Kellogg

Front-end web development projects can be difficult at times, but they don’t have to be. Every project is unique and each brings new and interesting challenges. These challenges are frequently presented by the very technologies we choose or must use on the aforementioned projects. Although using them is a great way to become more skilled, sometimes they can stand in the way of the project at hand. Mitigating these challenges through a process which can be repeated serves to not only improve the project and it’s schedule, but also your work.

Many, if not all, of the examples that follow are technologies or methodologies that members of Infrared5 have used before, but they’re in no way a comprehensive list of what is available or a recommendation as to what to use. Figuring out what works for you, your team, and the project is an important piece of this repeatable process.

The most important thing you can do is to plan ahead. That may seem obvious, but it can be easy to overlook doing it properly. Planning doesn’t have to be absolute and it doesn’t have to be too granular, but the more you plan for the more you can prepare for. Have you had things go wrong in the past? Make sure you account for similar situations in any new plans you create! You’ll never be able to perfectly account for everything, but you can account for most things.

Decide which technologies you’ll use. Remember, use the right (or best available) tool for the job. Think about what your browser, device, and screen size support will be like for the project. What javascript framework or toolkit, like jQuery or Dojo, will you use, if any? Will you be supporting HTML5 and CSS3? Will you be using any external libraries at all? All of these considerations will be important throughout the project and it is best to decide upon them early and stick with them in order to maximize your efficiency.

Start with something and build up from there. You can utilize HTML5 BoilerplateBootstrap, or whatever other starting point you feel comfortable with. You can use Initializr help set up an entire project, if that’s what makes you feel comfortable. Personally, I like to start with just the 1140 CSS Grid and jQuery.

Have your content and designs ready before you need them. Also make sure your designs are done based on whatever grid you’ll be using for your layout so that you don’t have to retrofit the design to the layout. Getting a running start on a project is all well and good, but breaking the up the development with blockades can make everything take longer than it has to.

You’ve got lots of technology at your disposal, so make it work for you. Your layout grid should serve as a flexible base upon which you can build without constraint. Lean on it’s support for your layout needs when you can, including responsive resizing. Use LESS or Scss/Sass to style faster and in a more organized way with less repetition. Break your javascript up into self-contained, self-cleaning, interconnected modules to help reduce the chances of memory leaks and unexpected errors. Document your javascript as you go so that everyone on the project can easily keep informed of what’s going on. Finally, use an IDE that helps you be more efficient. For me that’s Espresso, but for other developers at Infrared5 it’s Sublime Text 2.

I want to expand upon the modules I mentioned in the previous paragraph. These modules allow you to break functionality into smaller pieces, focus on them, and then combine as a whole to get the job done. Think of it as a loose implementation of feature-driven development. This allows your code to be more organized, more readable, kept in context, and focused on in a feature-by-feature way which, for me, helps development get done quicker.

Another piece of the development process I cannot stress enough is to use version control software and use it often. I prefer git, because Keith Peters turned us all on to this process which has helped reduce conflicts while working with a team. Use whatever you like though, because at the end of the day it’s all so that you don’t lose any work you’ve done.

Separate your development cycles so that your brain isn’t trying to do too many things at once. Do your development, then any and all enhancements, and then whatever bugs there are. This process may need to go through several iterations, becoming something like the spiral model.

Lastly, wrap it up by condensing and publishing a final product. Minify and concatenate your javascript and css, obfuscate if you must, in order to wring every last drop of speed you’re able to get out of the browser. Publish whatever documentation you’ve built up for client use, if applicable. Hand it off. See? Not so difficult after all.

Win for Boston Video Game Industry: PAX East Commits 10 years in Boston and $325K to Fund Mass DiGI

February 16th, 2012 by Elliott Mitchell

Video game industry leaders, higher education institutions and the press were all in for a big surprise when summoned to the Boston Convention and Exhibition Center (BCEC) for a big announcement Wednesday, February 15, 2012. Penny Arcade’s PAX East conference has committed to hold their annual video game conference for 10 more years in Boston at the BCEC. Last year, PAX East boasted 68,000 attendees over three days of digital gaming bliss. Numbers of future attendees may reach 100,000 translating into lots of revenue for local businesses and further establishing Boston as a central hub of game development.

PAX East also pledged $325K to the Massachusetts Digital Game Institute (Mass DiGI) over the next ten years to support and nurture a sustainable cycle of industry growth with the coordination between game studios, educational institutions and the government.

Among the speakers at the press conference were Massachusetts Lieutenant Governor Timothy Murray along with Tom Hopcroft (President and CEO at Mass Technology Leadership Council), Tim Lowe and Monty Sharma (Mass DiGI), Ken Surdan (VP Turbine) and a few other tech industry leaders.

See the WGBH news broadcast here.

Read about the announcement here.

, , ,

HTML5 vs. Flash Games Infographic via onemorelevel

February 9th, 2012 by Mike Oldham

HTML5 vs Flash Games
Created by: One More Level

, , ,

Gaming Ouroboros at the Global Game Jam 2012

February 6th, 2012 by Elliott Mitchell

Now and then, as a professional 3D technical artist and game designer, I find it’s helpful to step out of my usual routine and make a game over a weekend. Why? Because it keeps life fresh and exciting while providing a rare sense of instant gratification in the crazy world of video game development. Making a video game over a weekend isn’t easy for one person alone. For this, Global Game Jam was created.

This year’s Global Game Jam was held last January 27 – 29, 2012. I registered with was the Singapore-MIT GAMBIT Game Lab, in Cambridge, Massachusetts. Here is the lowdown of my experience.

Global Game Jam 2012 - Photo Courtesy Michael Carriere

The Global Game Jam (GGJ) is an annual International Game Developer Association (IGDA) game creation event. The event unites people from across the globe to make games in under 48 hours. Anyone is welcome to participate in the game jam. Jammers range from industry professionals to hobbyists and students. The primary framework is that under common constraints, each team completes a game, without preconceived ideas or preformed teams, in under 48 hours. This is intended to encourage creativity, experimentation and collaboration resulting in small but innovative games. To support this endeavor, schools, businesses and organizations volunteer to serve as official host sites. Several prominent sponsors such as Loot Drop, Autodesk, Microsoft and Brass Monkey also helped foot the bill.

HOW IT WENT DOWN

Keynote -

Brenda Brathwaite and John Romero addressing the Global Game Jammers 2012 - Photo courtesy Michael Carriere

GGJ site facilitators kicked off the Jam with a pre-recorded video from the IGDA website titled How to Build A Game in Less Than 48 Hours. The speakers in the video were Gordon Bellamy, the  Executive Director of the IGDA, John Romero (Quake) and Brenda Brathwaite (Wizardry) both co-founders of Loot Drop, Gonzalo Frasca (Ludology.org) the co-founder of Powerful Robot Games and Will Wright (The Simms) co-founder of Maxis. They speakers all gave excellent advice on creativity, leadership, scope and collaboration within a game jam.

Global Constraint -

Ouroboros

Our primary constraint was revealed after the keynote video. It was an image of a snake eating it’s own tail. The snake represented Ouroboros, a Greek mythological immortal. Variations of the symbol span across time and space from the modern day back to antiquity. The snake, or dragon in some instances, while eating it’s own tail has made appearances in ancient Egypt, Greece, India, Mexico, West Africa, Europe, South America and elsewhere under a host of names. It’s meaning can be interpreted as opposites merging in an a unifying act of cyclical creation and destruction, immortal for eternity. To alchemists the Ouroboros symbolized the Philosopher’s Stone.

Group Brainstorming –

Brainstorming Global Game Jam 2012

After the keynote game jammers arbitrarily split into 5 or 6 groups of 11 or so and went into different labs to brainstorm Ouroboros game pitches. After an amusing ricochet of thoughts, references, revisions, personalities and passions each room crafted 6 pitches which were mostly within the scope of the 48 hour Game Jam.

Pitch and Choose -

When the groups reassembled into the main room it was time to pitch.

The Rules-

  • Pitches needed to be under a minute
  • Title is 3 words or less
  • Theme related to the Ouroboros
  • The person pitching a game did not necessarily need to be on that potential team

There were about 30 or so pitches, after which each jammer had to choose a role on a game / team that appealed to them. Each Jammer had a single piece of colored coded paper with their name, skill level and intended role.

The Roles-

Choose Your Team - Global Game Jam 2012- Photo courtesy Michael Carriere

  • Programmer
  • Artist
  • Game Design
  • Audio
  • Producer

Games with too many team members were pruned and others lacking members for roles such as programmer were either augmented or eliminated. Eventually semi-balanced teams of 4-6 members were formed around the 11 most popular pitches.

My team decided to develop our game for the Commodore 64 computer using Ethan Fenn’s Comma8 framework. We thought the game narrative and technology married well.

Time to Jam - Photo Courtesy Michael Carriere

Time to Jam -

Post team formation, clusters of lab space were claimed. Even though most of us also brought our personal laptops, the labs were stocked with sweet dual boot Windows 7 & OS X systems with cinema displays. The lab computers were pre-installed with industry standard software such as Unity3d, Maya, Photoshop… We were also provided peripherals such as stylus tablets and keyboards. Ironically, I was most excited by the real world prototyping materials like blocks and graph paper which were also provided by or host.

First Things First –

Our space at Global Game Jam 2012 at Singapore - MIT GAMBIT Game Lab

After claiming a lab with another awesome team we immediately setup:

  • Version control (SVN)
  • Installed custom tools for Comma8 (Python, Java, Spite Pad, Tiles and more)
  • Confirmed the initial scope of the game
  • Set up collaborative project management system with a team Google Group and Google Doc

Cut That Out –

We needed to refine the scope once we were all aware of all the technical limitations such as:

  • Commodore 64 from 1982 is old
  • 64 kb of RAM for system not much
  • 8 bit
  • Programed in Assembly Language
  • 300 X 200 pixels
  • 16 pre-determined crappy colors
  • 3 Oscillators
  • Rectangular pixels
  • Screen Space
  • Developing in emulation on a network
  • Loading and testing a playable on legacy Commodore 64 hardware
  • Less than 48 hours to get it all working
  • Our scope was too big, too many levels
  • Other factors causing us to consider limiting the scope further included:
  • None of us had made games for C 64 before
  • Comma8 is an experimental engine that was untested in a game jam situation and is currently in development by Ethan
  • Tools such as Sprite Pad and Tiles are very archaic and limiting apps for art creation
  • Build process would do strange things to art after build time which required constant iteration

Rapid Iterative Prototyping -

Walking Backwards Prototype Global Game Jam 2012 - Photo Courtesy Michael Carriere

Physical prototyping was employed to reduce the scope before we went too far down any rabbit holes. We used the following materials to prototype:

  • Glass white board
  • Markers
  • Masking tape on the walls
  • Paper notes tacked to the walls
  • Graph paper
  • Wooden blocks
  • Pens

Results of Physical Prototyping-

  • Cut down scope from 9 levels to 5 levels as the minimum to carry the Ouroboros circular theme of our narrative far enough
  • Nailed the key mechanics
  • Refined the narrative
  • Determined scale and placement of graphical elements
  • Limited overall scope

Naturally we ran into design roadblocks and need to revise and adapt a few times. Physical prototyping once again sped up that process and move us along to completion.

QA-

Global Game Jam 2012 - Photo Courtesy Michael Carriere

We enlisted a few play testers on the second night and final hours of the game jam to help us gauge the following:

  • Playability
  • Comprehension of the narrative
  • Recognition of the lo-res art assets
  • Overall player experiences
  • Feelings about the game
  • Suggestions
  • Bugs

We did wind up having to revise the art, level design and narrative slightly to reach a better balance and game after play testing.

Deadline -

Walking Backwards - C64 - Global Game Jam 2012

1.5 hours before the game jam was to end it was pencilsdown. Time to upload to the IDGA Global Game Jam website, any other host servers and on to the site presentation computer. Out of the total 48 hours allotted to the game jam, we

only had about 25 working lab hours. Much time was spent on logistics like the keynote video, brainstorming, pitching, uploading and presenting. Our site also was only open from 9 am to midnight so there was not 24 hour access. With 25 hours of lab time all 11 games at my site were uploaded and ready for presentation.

Presentations -

Global Game Jam - Singapore-MIT GAMBIT Game Lab Games

The best part ever! The presentations were so exciting. Many of the jammers were so focused on their work they were not aware of what other teams were up to. One by one teams went up and presented their games in whatever the current game state was at the deadline.

Most were pretty innovative, experimental and funny. Titles such as The Ouroboros Hangover and Hoop Snake had the jammers in stitches. Fire farting dragons, Hoop Snakes, drunk Ouroboros and so on were big hits. Unity, HTML 5, Flash, Flex, XNA, Comma8 and Flixel were used to create the great games in under 48 hours.

Take Aways -

My teammates and I consider the game we made, Walking Backwards, to be a success.   We accomplished our goals:

Walking Backwards Team - Global Game Jam 2012- Photo courtesy Michael Carriere

  • Experimental game
  • A compelling narrative
  • Awesome audio composition
  • Most functionality we wanted we achieved
  • Runs on an original Commodore 64 with Joysticks
  • Can be played with a Java emulator
  • Got to work together under pressure and have a blast

Would have liked-

  • Avatar to animate properly (we had bi-directional sprites made but not implemented)
  • More audio for sound effects

The final take away I had, besides feeling simultaneously exhilarated and exhausted, is how essential networking at the game jam is for greater success. Beyond just meeting new people, networking at the jam made or broke some games. Some teams didn’t take time to walk around and talk to other teams. In one instance, a team didn’t figure out a essential ghost mechanic by the end of the jam. They realized at presentation time another team had implemented the same mechanic they failed to nail down in the same engine. Networking also provided mutual feedback, play testing, critique, advise, friendships and rounds of beer after the event ended. Many of the jammers now have a better sense of each other’s strengths and weaknesses, their performance under stress, their abilities to collaborate, lead and follow.

I, for one, will be a life long game jammer, ready to collaborate while pushing into both familiar and new territories of game development with various teams, themes and dreams.

Follow this link to see all the games created at my site hosted by the Singapore-MIT GAMBIT Game Labs

——

Elliott Mitchell

Technical Director- Infrared5

Twitter: @ Mrt3d

, , , , ,

Welcome to the new Infrared5 HTML5 site!

February 1st, 2012 by Kelly Wallick

Not only have we upgraded from Flash to HTML5 but we’ve re-designed the entire site. From a cool new dynamic background (hint: try clicking around to see the site’s Easter egg) to updated bios and work sections. We’ve been expanding our company, our clients and even our office so it’s only appropriate that our website should join in as well!

Designed and developed by our team internally the new site has been a labor of love and we couldn’t be happier with the outcome. Take a look around and check out all the neat features and new content. Head over to twitter and let us know what you think or drop us a line on our new contact page. We’re thankful to all the people who have helped us grow over the years and look forward to all the new and exciting work ahead!

ps…Keep an eye out in the next few months for our updated mobile site as well :)

, , ,