Sly5’s Flash Arcade Blog

Welcome to my guide on how to create a flash games arcade with WordPress. These notes are the result of a personal development project, an experiment that attempted to use the popular open source blogging platform, WordPress (WP), as the core for a flash arcade website. Using WP to power an arcade is by no means a new concept, there are numerous examples of excellent WP powered games sites out there, Raitendo being one that immediately comes to mind; they are however, still very much a minority, so there’s adequate room for expansion. What was lacking though, and it’s what motivated me to write this guide, was documentation on how to go about building a WP arcade, particularly if you’re not familiar with WP. So this is my attempt to bridge that gap.

Project Background

Readers of this blog will know that I’m always pondering ways to innovate and improve the flash game arcade industry. Without doubt, the industry is stuck in a time warp. It’s saturated, out of date and ready for some change. Therefore, it provides fertile ground for experimentation and doing things dfferently.

In a recent post I discussed the problem of arcade saturation and the negative impact of spam arcades on the industry as a whole. Later on in that post I made the point that arcade developers are part of the root cause of this problem, all too often opting for a fast buck and catering to the spam arcade culture rather than using their talent to explore new ground.

Whilst all these posts and this blog in general may come across as highly critical, negative and condemning, it has always been with a view to constructing and improving the gaming industry. You have to start by identifying what’s wrong with a system before you can begin to consider changing it. Up until I began building my WP arcade, that’s what I had been doing, assessing ‘the damage’. Part of the conclusion I reached was that it was time to start building games arcades in tune with the technology and trends of our times. This experiment was an attempt to see what it takes to build an arcade without recourse to the usual scripts, template layouts, flashing banners and other painful paraphernalia that plagues most arcades on the Web.

Given that I am not a coder or a developer, it was sadly beyond my means to create a platform from the bottom up. Therefore I was forced to look at existing software. My instinct was to look at open source software (OSS) options, not only for the zero cost factor, but more importantly to be free from dependencies on lone script developers and their once-in-a-blue-moon update promises.

The first thought that came to mind was WordPress, simply because I had been a long time user and I knew it inside out. The intention behind this guide is to provide information to anyone interested in trying this out for themselves. You’ll have to come up with your own designs, content and Web hosting of course, but hopefully I’ll be able to give you the foundations or at the very least a bit of inspiration. Let’s see what happens…

Why WordPress?

So why work with WordPress? WP is not usually associated with flash game arcades and this is partly to do with the fact that WP didn’t support the embedding of flash games for quite some time, but mostly because WP has been first and foremost a blogging platform – that’s what it does and that’s what it’s best at. However, over the past couple of years there has been an extensive diversification in WP applications, with individuals and companies now using WP to power magazines and corporate websites. With this diversification has come a whole new era of WP themes and plugins that have extended the capabilities of WP – including the ability to embed and host flash files on a WP site. Hooray!

[Note: it has no doubt always been possible to use flash if you are a skilled developer, but for the laypeople amongst us it has never really been an option until recently.]

WP brings several key benefits to this project. First of all WP is backed up by one of the largest developer communities on the Web, this means it is expandable with 100s of free plugins and themes released every month. Secondly, its core features are rock solid and easy to use with the benefit of 5 years of coding history under its belt. Core functions include tagging, categories and an all round user-friendly admin panel. Thirdly, WP is well known for being inherently search engine friendly. Google loves WordPress! On top of that, I’ll be using the all in one SEO pack to boost ranking. Finally, beyond flash games, WP offers the possibility of embedding other media such as video and audio. This was something I was keen to open up in building my own arcade. While the main focus of the site was to be gaming, there was also room for a few movie trailers, music tracks and other media goodness

Project Aims

• To build a flash games arcade powered by WordPress
• To create a unique design and layout
• To incorporate user accounts and user-oriented functions (profiles, favourites, game and media uploads, rated reviews, users blogs etc)
• To incorporate game rankings
• To enhance searchability with tag clouds and an image-based archive
• To open the site up to other media (video and audio)
• To max SEO the site
• To run the site without flashing ads, google ads and any other godforsaken, headache inducing nightmare — but to offer some exclusive 125×125 banners ads
• To offer game developers a premium space to showcase their work

I’m going to go over my ’shopping list’ with you here but please note that this list is merely suggestive. For every suggestion I make there are at least 3 or 4 others that you could consider. SO it’s always worth going the extra mile and searching google or the WP plugin repository for more options.

WordPress Core

I used the latest release of WordPress (at the time) to power my arcade. At that point it was WordPress 2.5.1 though now the public release of 2.7 is imminent. I won’t go into all the features packed into the 2.5 or 2.7 branches of WordPress because it’s outlined very succinctly here. Instead I’ll focus on a few features that were crucial to the operation of the games arcade.

Categories and tags: the main taxonomy of the arcade relied on WordPress’ built in category and tagging system. Categories and sub categories were used to organise games by genre and theme. Tags offered a secondary layer of navigation and served as a ‘wildcard’ search element. So for example, a typical games category would be ‘action’, this category could include the subcategories ’shoot em up’ and ‘beat em up’ and then at a game-specific level you’d have tags such as ’street fighter’, ‘karate’, ‘boxing’ etc.

Custom fields: built into the WordPress core are custom fields. These post-level functions allow you to append a unique field and value to any post and display the ouput once the post is published. An obvious example of a custom field in the context of an arcade would be embedding a flash game:

field: game_embed
value: /mysite.com/games/game.swf

By setting up custom fields you can control and enable special attributes in your posts, saving work on hard coding each new game page. For in-depth information on how to use custom fields in WordPress please read the WP codex entry here.

User Roles and Profiles: Part of my intention in building this arcade was to implement an array of user-oriented features. To do this in WordPress I tried to make use of the built in roles and profiles structure. A user role is simply a level of authentication attributed to a user on sign up or delegated by an administrator. The default roles are (subscriber, Contributor, Author, Editor and Administrator). Each role will allow users to access different parts of the site. This is crucial if you’re thinking about setting up some exclusive user-only content.

Default user profiles are fairly basic, they allow users to change their password, input some information about themselves, provide links to their sites and various messenger services. To add more depth to user profiles, including custom fields, profile pictures and more, I’m used the Userextra plugin that is highlighted below.

Custom Themes

In an ideal world I would have coded a new theme from scratch, but I had neither the time nor the ability to do so. Instead I went about it another way: I searched for existing themes that can be easily modified and that come with a GPL or creative commons distribution license. Using one of these themes I was then able to strip the theme bare and begin reworking the CSS and tweaking some of the php file code.

The following is a personal selection of free themes that could easily be used to run an arcade. The theme I ended up using was created by Jason Schuller over at www.wpelements.com. Using the theme as a ’skeleton’ I then began to create some preliminary design sketches which I’ve shared with you here below.

• The Morning After: A great 3 column magazine type WordPress theme by Arun Kale with impeccable user-friendly coding. Custom fields for featured posts and thumbnail images are already in place so it wouldn’t take much to tweak this for an arcade adaptation.
• Mimbo: Another 3 column magazine theme, this time by Darren Hoyt. This is a flexible grid based theme that has undergone several revisions. It is spacious and simple and provides a solid canvas to build from. Like The Morning After, it also uses WordPress custom fields for featured items and thumbnail images
• The Unstandard: this is a theme by a top notch designer called Derek Punsalan. It is another grid based theme with an emphasis on graphic content. It comes build in with an inline category footer feature that would be ideal for displaying games by category or latest games.
• Monochrome Gallery: This is a theme by Thad Allender of Graph Paper Press. It is probably one of the strongest contenders for an arcade layout. It comes with an automated featured post carousel, an inline thumbnail galleery section and an extendable footer. This theme would probably require the least work to get it up and running as an arcade.
• CSS Gallery: As its title indicates, this theme was intended for use with a style gallery, a site that would showcase other sites using thumbnail snapshots. This theme could be turned into an arcade, it supports user ratings, comes with an ajax sidebar and space for advertising. Another strong contender.

Further theme resource sites:

• wpSnap: a good showcase of the best free WordPress themes.
• Smashing Magazine: A series of 4 mash up posts outlining some of the best WordPress themes.
• Unmatched Style: A neat collection of free themes.
• Free WordPress Themes: a site that does what it says on the box.
• Theme Prestige: showcasing free ‘premium’ WordPress themes.

Plugins

• Akismet: “Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it.” Akismet is the WordPress frontline against spam. It’s the bare minimum for any serious blog or WordPress powered site. As many of you will know, flash arcades invite a serious amount of spam on a daily basis. Many of the existing arcade scripts struggle to deal with spam. Akismet does a pretty good job of fighting spam on its own. It’s being continually updated and improved. There are other plugins that you can use to beef up spam protection if you like.
• All in One SEO Pack: “Out-of-the-box SEO for your WordPress blog. By uberdose.” This is a fantastic plugin that does what it says on the box. It rewrites post titles, adds meta tags to all pages and is highly configurable. You can run it so that all SEO functions are automated. But if you really want to push your search engine rankings and make each post/content item unique, you can add SEO data straight into the WordPress page editor using this plugin. This little baby was fundamental in getting my new arcade out and about across the Interwebs
• cformsII: “cformsII offers unparalleled flexibility in deploying contact forms across your blog. Features include: comprehensive SPAM protection, Ajax support, Backup & Restore, Multi-Recipients, Role Manager support, Database tracking and many more.” I’ll used this plugin to power some of the user-side interactive functions such as game and video uploads, direct contact forms and more.
• Kimili Flash Embed: If you want to embed flash games in your WordPress arcade you can now do it without a plugin and just paste your embed code in the body of a WP post. However if you want to use a plugin to achive the same effect then I recommend using the kimili Flash embed plugin. It is very straight forward, simply upload it and activate it, then use a single line of code to call the flash game within any post or page.
• Post-Plugin Library: “Does nothing by itself but supplies common code for the Similar Posts, Recent Posts, Random Posts, and Recent Comments plugins.” This one is merely there to power the Similar Posts plugin that I’ve highlighted below.
• Role Manager: Allows complete control over user roles and permissions from subscriber (level 0) to Administrator (level 10). As mentioned previously, this plugin allows you to give specific permissions to user roles on every aspect of the site’s functionality, from approving comments and reading private pages to writing new posts and uploading files.
• Similar Posts: “Displays a highly configurable list of related posts. Similarity can be based on any combination of word usage in the content, title, or tags.” I used this plugin on game-specific pages to highlight other content on the arcade. Simple but necessary.
• UserExtra: “Extends user profiles to include admin-defined attributes, and provides for category access controls with user-level granularity.” As I mentioned before, this plugin allowed me to extend user profiles and make them into something worth using.
• WP-PostRatings: “Adds an AJAX rating system for your WordPress blog’s post/page.” This plugin enabled me to set up user ratings and generate a most rated and most played list. It is highly customisable and comes with around 10 different icon sets for ratings (stars, hearts, thumbs up/down etc).
• WP-Super Cache: “This plugin generates static html files from your dynamic WordPress blog. After an html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.” This plugin will help speed up operation time. A lot of people have commented on how slow WordPress would be as a games arcade. I don’t believe that’s necessarily true, as long as WordPress is properly configured and content is properly balanced. Whatever content you publish on the Web, you should always be looking for ways of speeding up load times and reducing file sizes. I’ll post something on the SLy5 blog about ways of speeding up an arcade at a later date.

In the next part of this guide I will outline some of the initial design ideas for my WP arcade, including elements of layout, textures and color schemes.

I should add that by this stage I had a working version up and running and I had already purchased the domain name for the arcade. So I had done quite a bit of thinking and searching for an appropriate name for my site. Name selction is crucial because it influences several aspects of the site including branding, atmosphere/design and target audience. It’s important to come up with a catchy name but it has to relevant in some way to the content you’re going to provide. The domain name I came up with was craverz.com. The name played on the idea of ‘craving’, a word often associated with addiction but by inserting the ‘z’ at the end I tried to make the term feel more current and vibrant so that it suggested more of a desire to play games and enjoy the online gaming experience. I’ll let you decide whether it works or not…

Working Process

So in simple practical terms how did I go about starting a design? Well it all came down to some basic research. I began by brainstorming the key elements I’d like to see in an arcade – an arcade that I would enjoy using myself. I then went and tried out around 10 other existing games arcades, ranging from ‘A-listers’ to small scale sites, and I compiled a quick pros and cons list based on my experience. The last thing I did was to look at my two existing arcades and specifically to look at statistics. Using Google Analytics I was able to get an in-depth sense of which games were popular, which parts of the site were most used, and most crucial of all: which parts were unnecessary. I then looked back over this data and reduced it to a set of 10 fundamental features that I’d like to use in my arcade.

I should also point out that the background to this research was oriented towards eliminating excess and redundancy from the arcade structure, optimising categorisation and maximsing the presentation of game content.

Once I had my 10 point feature set, I then began a quick layout sketch using basic shapes, squares, rectangles, circles etc to come up with a content layout. Given the fact that any design I came up with would have to be layed over an existing WordPress theme, I had to limit myself to some fundamental layout factors: 2 column, 3 column, header, footer, sidebar etc. As much as I wanted to try something more radical, I simply didn’t have the developer skills to implement wild ideas at that point, so it was important to be as realistic and economic as possible – and that’s not necessarily a bad thing!

After I reached a satisfactory layout in sketch form, I then got to work on transposing that layout onto my chosen WordPress theme. The process was one of accommodation rather than outright innovation. The ‘wireframe’ diagram I have included below was really only something I made for readers of this blog, my work on the design was based on the paper sketches. The wireframe diagram is relevant if you’re building a WordPress theme from scratch. For an excellent guide on how to develop your own WP theme read this.

Front Page Mockup

The wireframe illustration below shows you how I wanted the front page to look in an ideal sense. It looked fairly ‘busy’ to be honest, but that was a reflection of my amateur design skills. What the site actually looked was quite a bit different (as you can see from the screenshot further down). Nevertheless, the wireframe diagram gives you an overall sense of the key elements and offers a means of planning your layout and content which is a very important mental process to go through.

Logo & Branding

I’ll now talk you through some of the main features of my design. Starting at the top the first thing that hits the visitor is the logo, or in other words the ‘brand’. Without getting into spam arcades, I’ve seen so many arcade sites that pay little to no attention to branding. There is an obsession in the industry to search for domain names that contain the word ‘arcade’ as if somehow this keyword alone would make your site an instant success. So you have things like arcadefun, fungamesarcade, retroarcade, funretroarcade, funretrogamesarcade, etc etc. This strategy is completely counter productive, because it ends up rendering your arcade characterless, anonymous and one of a million other similar sites.

Get a brand name, go for something unsual but evocative and make sure you spend time developing a logo. Even if it’s just refining a nice font you got from dafont for example, it will help print the brand on your visitor’s minds, and that, as sad as it may sound, is the fundamental principle of branding. But its not just as simple as having a memorable name and logo, branding pertains to all aspects of the design, from color to texture and font type (more on that below) etc. The main rule for me was to be consistent with design choices and always to makes decisions that serve to enhance the overall brand of the site, rather than to isolate individual sections and to risk loosing focus.

Bookmarking

The next feature you will notice on the top right is a search box, some content and game review RSS feeds and some key social bookmarks (delicio.us, magnolia, blinklist, technorati etc). Bookmarking is important for the following reasons: loyalty and word of mouth. These services provide a means of one-shot visitors finding your site again, but they also have a secondary purpose of allowing vistiros to share content with other users. Get a popular delicio.us user to bookmark your site and you will suddenly have 2000 other users visiting as a direct result. There are so many so-called ‘Web 2.0′ services that you can use to enhance your user base and traffic to your site. One of my favourites is Twitter, but there are countless others. Be creative, use these services and exploit them to your advantage. The Web space in 2008/09 really is your oyster. It’s there for the taking so be clever and keep up with the times!

Navigation

In terms of navigation and general usability, what I wanted to aim towards was one main navigation bar that served the entire site. I found that the majority of the sites I visited during the research phase overwhelmed me with navigational options, sent me in the wrong direction and overall made me loose interest very quickly. Having a simple and functional navigation structure will enable visitors to have an immediate response to the way they access content on your site. It is important for a visitor to feel in ‘control’ of a website, to master the structure visually in a matter of seconds.

In this past post I talked about ways of challenging categorization. I was looking for ways of departing from the common game classification (action, puzzle, sports etc) and I tried to come up with somethign that would speak to users more directly, more personally. That’s when I had the idea of an ‘emotion-based’ categorization. The idea was that user would be able to select a category according to their particular mood when they arrive on the site. But at the same time it could also help change their mood. So if they came to the site feeling bored or tired or angry for example, they could select the category ‘happy’ or ‘crazy’ and have a compeletely mood changing experience. This proved to be really effective on Craverz.

Featured Content

The next main feature in the design is the featured content strip that forms the second visual layer after the logo. This area used a dynamic script to power a sliding gallery of featured/most recent games on the site. It was regularly updated and it helped give the site a sense of continual freshness. Providing a sense of ‘newness’ is another key element in keeping loyal visitors and building a community.

Main page left column

The left hand column had 4 basic components: a large thumbnail image, a brief introductory outline of each game, a voting system and a review section (authenticated users only). The main emphasis was on the image. Another one of my observations of the many arcades I visited was how tiny and meaningless the thumbnail images were. I wanted to provide users with a real ‘feel’ for a game just by looking at an image. Clicking on the large thumbnails enabled users to play the game straight away. Clicking on the test or title of the entry allowed them to see the game details in more length and to play the ‘embedded’ version of the game on an individual WP page.

The voting and review elements formed part of the interactive side of the site and were reserved for authenticated users at first but then became available to all later on. There were many more interactive features that I wanted to include in the site but the combination of poor coding knowledge and a lack of time meant that many had to be dropped along the way. This was not really a major disappointment because it enabled my arcade to remain simple and easy to use.

Main page right column

The right column contained the user login panel. This was something that I also ended up getting rid of and I used the space for a large google ad instead. Below that was some dedicated space for 125×125 banner ads. Although this would work in theory, I found it difficult to attract advertisers to eventually I switched to using google ads instread.

Below the ad section were 2-3 panels displaying various site stats such as ‘editor’ picked games and most rated games and a section for user uploaded games. These were all enhanced with the inclusion of tiny thumbnail images and some clean spacing in the CSS.

The next aspect of the design are the textures and colors of the site. Here I’ll give you a brief outline of my choices accompanied by some simple illustrations. Hopefully this will give you a sense of how to develop a ‘palette’ in design.

Textures

Partly inspired by Bryan Veloso’s relaunch of Avalonstar and partly out of personal preference, I wanted the site to be ’space age grunge’. I know it sounds ludicrous and it probably is but that’s the way I saw it. The space age element was a reference to some of my personal influences such as Stanley Kubrick’s 2001: A Space Odyssey and Tarkosvsky’s film version of Solaris. The grunge element was a nod to my youth and growing up with ‘grunge’ culture in the early 90’s.

Below are two texture sketches showing contrasting colors, light grey and black. These elements formed part of the site background. The black element was used for the navigation bar and created an element of contrast in the colour scheme.

Texture 1: ‘Light Grunge’

Texture 2: ‘Dark Grunge’

Color Scheme & Fonts

The link color scheme was set in strong contrast with the grayscale base layers of the design using blue and orange colors. To balance this out there was a sufficient amount of grayscale tones and some good old white space too. The font type was Arial which is always a safe bet when it comes to legibility and rendering across browsers. I’m a big fan of Helvetica which Arial is a modern version of.

Introducing Craverz.com

The whole experiment moved quite quickly, perhaps too quickly to deliver a polished product and that was the case with the first iteration of the site. My haste was reflected in the numerous bugs and pending features that the arcade opened with. But to me that wasn’t really a problem since the whole object of the experiment had been about the creation process and proving to myself that I could build an arcade out of WordPress desipite my amateur coding and design skills. I learnt a hell of a lot in a short amount of time and hopefully what I’ve discussed here will be of some help to you too.

So below is a screenshot of the first version of Craverz.com. Before I sold the site, it went through several revisions and new elements were added such as an extended footer listing all the new games in each of the main categories, but this is what it looked like the first time around:

Craverz.com!!

Project Debrief

Craverz.com was launched in April 2008. Over the 4 months that I owned it, the site went from strength to strength and here below I’ve outlined some of the stats and details that reflect that. Inevitably, I had to make changes too. Some things just didn’t work and others weren’t working well enough.

One of the most difficult things to implement was a degree of user-side functionality that met my expectations. Sadly my coding lacunae led me to remove user sign ups and to ditch the whole user profile and authenticated user options. But to be honest once I removed that I felt things were much more focused and I was able to really work on improving the content and overall ‘brand’ of the site.

One of the key enhancements I made after the launch was widening the game space on individual game pages to a maximum of 800×500px. I also added a meebo chat component to each indvidual game page. I found this to be a very effective means of getting gamers to interact and chat with each other.

In pure statistical terms, by the time I sold the site, some 4 months after the launch, the site had a hand picked selection of around 180 games. The emotion-based categorization was beginning to yield some very interesting stats with the most popular category being ‘focused’ which said a lot about the site’s audience at that point.

General site traffic increased on a weekly basis. The google analytics graph below shows visitor trends over a one month period between April and May 2008. Notice the sharp declines on weekends. This is something that most webmasters experience and reflects the trends of the visitor demographic: school kids!

(Click on image for larger view)

90% of traffic to the site came through google and the main search term being used was the word ‘Craverz’. Bearing in mind that I did nothing to publicize the site, apart from write about it on my blog, this to me was a demonstration of the site’s focused branding. The name craverz had clicked with the target audience and users had clearly remembered the name.

So there you have it. That’s the end of my WP games arcade experiment. I hope you’ve found this guide interesting and if it prompts you to build your own WordPress powered arcade, please share your url with me here in the comment section. I’d love to see what you come up with. Happy Gaming!