DAT204: background and asset design for Blue November HTML5 canvas game groupwork

As part of our groupwork for HTML5 canvas game development, I was commissioned by the team to design a background for the game, Blue November (link: http://giantkiwi.co.uk/sites/aotbn/). I've designed the background using Adobe Illustrator, and made use of Bézier curves to emulate the waves, as our game takes place in the sea:

In addition, I've also vectorised an existing asset that will be used in the game's introduction page. Because the carrier needed to be simplified, I've toned down the details:

DAT202: Research into the HTML5 platform for our educational application

As part of our assignment for the Creative Industries module, we were given a task to produce an educational application for a charity that promotes expeditions. Our client, ETE (Education Through Expeditions), are about to go on an expedition to mark the Queen's Diamond Jubilee by going to the highest point of the British Commonwealth in the Arctic Circle (source: http://www.etelive.org/content/contentete.numo?id=172). We decided to base our application on this expedition, as it provides an insight into the facts about the expedition, the area and wildlife, to the application's intended target audience: school children.

Because there's no restriction as to what platform we could use to base our application on, I came up with the idea of putting the new HTML5 platform into good use, not only because we already have another module that is teaching us about the platform (specifically <canvas>, the main component of which has been highlighted as a replacement for Flash), but also because we saw it as a perfect opportunity to break away from the confines of using proprietary media, and reinforce our learning of the platform at the same time.

To break down the research I've done on HTML5, here's a SWOT analysis:

Strengths:

• HTML5 is a new platform that introduces new features never seen before in the history of the HTML standard
• HTML5 is platform-independent; it works in browsers that support it, and in fact, a vast majority of browsers in use today already support it
• <canvas> is especially important, because, for rich, dynamic media content, it reduces the need for Flash as many capabilities, such as animation, can be used inside the tag

Weaknesses:

• Not all browsers support the features in HTML5, especially some of the proposed features
• <audio> and <video> does have compatibility issues, due to different browser developers favouring incompatible standards over established standards, although the issues are being eliminated within time as developers are still deciding on a final, agreeable standard
• One aspect that was highlighted was that some schools may have neglected to upgrade their browsers, although with support for IE6 being discontinued and some schools even moving away from Windows, the uptake of HTML5-compatible browsers are increasing

Opportunities:

• HTML5 will eventually replace Flash and other plugins for many purposes that HTML5 replicates, such as rich media
• HTML5 has a lot of potential to mature into a platform that will eventually eliminate issues in a completely open-source environment

Threats:

• Complacency in the industry and schools means that uptake of HTML5 is still slow, and with the aforementioned issues regarding compatibility in <audio> and <video> due to differing standards, Flash still remains dominant
• Until schools start upgrading their systems, market share for HTML5 will still be in a niche

DAT206: Group project using Kinect

In our group project, we are using the Kinect with OpenKinect, which is an open community-driven API that is used to access the Kinect's sensors and camera, and also allows Processing to control the tilt. The Kinect was only just released last year, so for the first time in IDAT, we will be using the many capabilities that have never before been exploited in a project.

Originally meant as an interactive peripheral for the Xbox 360, in response to Sony's PlayStation Move and the incumbent Wiimote, many opportunities became true after Spanish hacker Héctor Martín Cantero managed to create the first open-source driver for the device in response to an Adafruit competition bounty. The OpenKinect project was founded after Héctor posted the hack on Github, and is available in various programming languages; the version we're using is the Processing variant, which includes the necessary libraries in order to access the API. OpenKinect is in continuous development, and many more programming languages are being added as development progresses.

Our game will be themed on zombie survival, and the goal of the game is to survive the whole duration of the game without getting touched by zombies, and defend yourself against them. We are going to try and fuse two Kinect devices to create a 3D world, and use the tracking features in the OpenKinect API to detect the player's movement and interactions against the zombies, and to detect collisions that would result in the player's heath being subtracted. We are also going to use an object to act as the gun, which the player uses against the zombies. The Kinect will detect the player's interaction with the object, and whenever the player pulls the trigger, it fires the gun, and if the gun is aimed well at the zombies, the zombie then gets killed.

IDAT 106: Plymopoly - Environmental & Contextual Aspects

In our current group work, the game is based on the Monopoly idea, but adapted to suit commerce in a real-life environment, with a vision to boost commerce in the area, and to increase the use of QR codes for delivering promotions. As our project takes place in the city, ideas pulled from the original game had to be adapted to suit retail so then delivery of promotions can be delivered effectively, and also to add an aspect to the game where both gameplay and specially-created offers are used.

Most of the time, the Plymopoly game takes place in shopping and commercial areas, which is a mixed environment because the main areas in the city are indoors and outdoors, and also have varying degrees of footfall, which depends on many factors such as weather, economic and other events that take place at the same time, such as student nights that take place occasionally in Drake Circus.

Drake Circus has an estimated 74 stores, whilst the main shopping districts of New George Street, Armada Way and side street Cornwall Street have an estimated 150 stores and businesses. Together, they make up about 224 shops and businesses inside the main city centre districts. Drake Circus is inside, whilst New George Street and Armada Way are mostly outside, with the latter having an inside section below Sainsbury's.

The online environment depends on how the connectivity is affected, and how reliable it is. Because of the mobile nature of the game, connectivity is required, and the game would not work if connectivity is not available, so 3G and available Wi-fi is a major pre-requisite for participation as it needs to access the internet to read QR codes, update the status of properties and register leader board statistics. Also, a working camera built-in to the device is also required because the project relies on QR codes and applications that support QR code capturing. The websites that are going to be used in the project are optimised for smaller screens and will use less bandwidth, so then the project will be accessible to all, especially those that don't have an extensive mobile internet plan.

The game will take place in an environment where the amount of people movement is expected to be high, particularly in central areas. As nothing but QR codes and handheld devices (i.e. smartphones) are involved, there are no obstacles in regards to equipment placement that will occur in the project. The most tech-savvy are likely to be the biggest users of the project, although it will be expected that casual smartphone users would also take part as well.

(Main group blog about the project is at http://www.thelockwood.co.uk/idat209/. This posting will also be cross-posted there for collation with related postings.)

IDAT 106: Large-scale Monopoly-style interactive game and initial ideas

As part of a joint project with the year 2s, we have to produce a large scale interactive version of a popular board game, which incorporates many features whilst at the same time addresses a current situation, where we have an opportunity to change it, be it worldwide or local. For my group, we decided to do a Monopoly-based game where we will set it in our city of Plymouth and use it to brainstorm solutions to the economical problem that the city suffers from, particularly due to the loss of air links owing to a drop in passengers (which later lead to a call to have the runway extended at our local airport), and also because of business going bust with (although in places it's getting better) many places becoming vacant.

This gives us the perfect opportunity to attempt to draw in more commerce to help transform our city through the wonderful medium of IDAT. We are planning to base our game on web technologies and Flash, an interactive platform that is popular for dynamic information and animations, with a view to complete it within 8 weeks before the deadline, which will be due round the spring/summer time.

IDAT 102: The completed result of Flennis!

After days of trying to weave my way through thousands and thousands of code, and then trying other solutions (in terms of pre-existing examples that are similar to what I'm already doing) online, I've then found an excellent solution that worked better than mine. It turned out that the game needed a bit more of a 'hands-on' approach, and the keyboard input didn't work out good for the game, so instead, I've changed to a mouse-based input that works by moving the mouse up and down on the tennis court to move the racket to hit the ball to the opponent. I've also made a few changes to the original design, which mostly involved moving the game's logo to the bottom left of the screen, rather than in the middle, to accommodate the 'Round's up' text, which occurs after either the player or the opponent reaches a score of 5. I've also included a clock at the bottom right-hand side of the court, which uses the system's time as external influence.

Also, the colour of the court has been changed to a warmer shade of green to match the astroturf/grass colour that most tennis courts have, and proper court markings have been added, in addition to a backdrop for the scoreboard to increase legibility of the numbers. I've also decided to ditch the graphical movie clips in favour of ActionScript-generated shapes because I wanted the game to be more lightweight, whilst at the same time maintaining the replay value of the original. As for the rest of the detail, I've done improvements to the game's source code to make it more challenging (smaller ball with a higher score limit, but at a slower FPS than the original to avoid it becoming a 'speed run', where the game is finished quickly without even realising the outcome).

In conclusion, the game came out as a result that I've expected from the start, but at the same time, it improved on what my original specification included.

You can play the game here: www.elnormo91.co.uk/Flennis.html

INSTRUCTIONS ON HOW TO PLAY: To move the paddle, move the mouse up or down. Try and get the ball behind the opponent to score.

Enjoy!

IDAT 102: It's pong! No it isn't! It's tennis! No it isn't! It's Flash tennis! Oh yes, in fact, it's Flennis!

As part of an assignment for IDAT102, I decided to go old school with a game that takes the classic side-scrolling table-tennis-based game to another level. As far as I know, I haven't seen any examples of existing Pong games that are themed around actual tennis. Yes, that's right, I've decided to create a game called 'Flennis', which is basically Flash tennis, but maintaining the simplicity and addiction of the classic game that used to grace arcades and homes back in the days before we had PlayStations, Xbox 360s, Nintendo Wiis and the like, but in the time of Atari, its originator, of course. The game uses keyboard control to move the bat up and down to deflect the ball towards the opponent by using collision detection to then make the 'bounce' effect. When the ball hits either the enemy's end or the player's end, the collision detection then registers a score for the enemy and the player, respectively.

At the same time, I'll be combining the look-and-feel of an actual tennis court with the retro look to fit in with the Atari heritage of the game's basis, but also making the game unique in style, and friendly to browser gamers, who like to play games inside their browser because of the convenience that web browsers offer, and the fact that in a work environment, during one's well-earned break, restrictions mean that everything may be restricted to a web browser, provided that Flash and JavaScript are turned on.