Wednesday, 26 August 2015

Week 5 Workshop - Pong Part1

This exercise would use the code done yesterday and develop it into a simple Pong game.
Using the existing files on last workshop:    pong.fla & main.as
Change:  width*height: 1024*768       frame rate(fps) : 25
Create: player class: 'player.as'

define the player's width and height
 public var playerWidth: Number = 30;  
 public var playerHeight: Number = 100;   

provide the value for xPosition and yPosition and set player on stage
 //position the player on the stage  
 this.x = xPosition;  
 this.y = yPosition;  

draw player (player.as part)
 this.drawPlayer();  
...

 public function drawPlayer() {  
      // draw the player on the stage by filling a rectangle  
      this.graphics.beginFill(0x452506, 1);  
      this.graphics.drawRect  
      (  
        0-this.playerWidth/2,  
        0-this.playerHeight/2,  
        this.playerWidth,  
        this.playerHeight  
      );  
}  

add player to the stage (main.as part)
 var player1;  
 var player2;  
 ...  
 player1 = new player(num, num);  
 player2 = new player(num, num);  
 stage.addChild(player1);  
 stage.addChild(player2);  

in the player class, add two functions to get the player's current position and get the player's moved position
 public function setY(newY)  
   {  
    //set a new Y position for the player  
    this.y = newY;  
   }  
   public function getY()  
   {  
    //return the current y value for the player  
    return this.y;  
   }  

set the keypress event in main.as
 import flash.events.*;  
 ...  
 stage.addEventListener(Keyboard.KEY_DOWN, movePlayer);  

set the key pressed movement of player1 and player2
   public function movePlayer(e: KeyboardEvent) {  
    //get the key pressed and then move the player  
    var speed = 8;  
    switch (e.keyCode) {  
     case 87:  
      // W pressed and player 1 moves up  
      player1.setY(player1.getY() - speed);  
      break;  
     case 83:  
      // S pressed and player 1 moves down  
      player1.setY(player1.getY() + speed);  
      break;  
     case 38:  
      // Up pressed and player 2 moves up  
      player2.setY(player2.getY() - speed);  
      break;  
     case 40:  
      // Down pressed and player 2 moves down  
      player2.setY(player2.getY() + speed);  
      break;  
     default:  
      trace('Invalid key pressed')  
      break;  
    }  

The rest of the code might not be recorded simultaneously but would be done at spare time.

Week 4 Workshop A - AC3 Hello World!

Get absent to the workshop, done the practice at home.


Very excited to learn a new OOP language!

The first exercise is a simple introduction to the software. Get familiar with the basic layout of the software and make some simple coding.

Listing key knowledge:

- Stage file as "file.fla" . This is what the users/players would see as the main interface.
- Class file as "file.as'.   This is the external code for the stage, usually the "main.as" (AKA document class) is the one that directly (exclusively) links to the stage file. In other word, the code on "main.as" is what would be shown on the stage.
   #The Class name must be exactly same as the file name#

- package: All classes in AS3 begin with the keyword package. The package keyword tells Flash that everything in between the curly brace just after it and the final curly brace is part of a single group.

- import statement: it is used to import different classes from different packages. Generally they will come from the core Flash Player set of classes.

 import flash.display.MovieClip;   
 import flash.events.*;  

- To set the "main.as" as the sub-class of the MovieClip class:

 public class main extends MovieClip {  
 }  

- "Complier Errors" is handful for debugging.

- Variables:

 var greeting: String;   
 greeting = 'Hello World!';  
OR
 var greeting: String = 'Hello World!";  

- Keyboard input
1.
 import flash.events.*;  

2.(inside the public function)
 stage.addEventListener(KeyboardEvent.KEY_DOWN, otherfunction);  
 public function otherfunction(e:KeyboardEvent):void {  
 }  
#void means the function did not actually create any value


Thursday, 20 August 2015

User test of video prototyping

The video prototype was tested by 6 participants. As no online tools were used for assisting the test evaluation, the test results were mostly taken down by note. Several users voluntarily asked for writing the evaluating result by themselves. All the test results were summarised and categorised later, and the final result is listed below:

- The video is self-explainable and the idea is quite clear. As the game was developed based on snake&ladders, pacman and hangman, the gameplay seems familiar to the users.
     - One user points out that the game is still a little big complicated, for example, the mini game system.

- The beginning of the video during the problem statement could mislead the audience to think this is a drinking game. Although people could basically bring drinking game into any kinds of gameplay, it is not the main purpose of the game. However, the idea is interesting that whether the game has its potentiality to become a drinking game.

- Several users raised the question of what would happen if you reached to the top? This has been missed in the prototyping video, as the main explanation of the game-over system is the "hang man" similar system. Ideas could be consider whether the game stops once one player reached the top or it should be a looping map.

- The interaction method is only smashing button, which could be found boring by player pretty soon. The way of interaction or even the gameplay should be developed before the implementation of the first prototype.

Tuesday, 18 August 2015

Video prototyping running log

11/8

On the workshop today, I came up with about 40% script of my video. I decided to shoot the opening scene with the help of my friends to mock up a hilarious but authentic situation while playing the classic games like Snake & Ladders and Pacman. I'm still struggling of whether I should use the real footage of presenting my game or just make explanation by animation with the help of software.


13/8
My friends are happy to help me taking the opening scene of problem statement in their home. The shot would be taken on Saturday after noon this week (15/8)

14/8
MADE THE DECISION! The game presentation would be made by animation. Either Sony Vegas or Premiere would do the trick. I prefer Sony Vegas, as I am still learning Premiere by my own, the Vegas would be much more familiar and the producing process could be more efficient. Hope tomorrow's video taking would be fine.

* hopefully by the next time making another video, my Premiere skill would be ready :P


15/8
Fun day of taking the footage. Many thanks to those who participated :) I am glad I chose to do it in the afternoon, the lighting condition would be much worse if we shot the scenes in the evening.There are in total of 11 footage taking today, which would require many cutting later. Expected though.



16/8
Video editing started today! However, before making the actual editing of my video, I spent most of my time on Photoshop though, because the animation explanation would require lots of pictures. I Photoshoped the game board, characters, supportive images. All above takes quite a long time. I used the remaining working time of the day cutting the scenes shot with my friends. The total number of 11 footage is edited to about 30 seconds.



17/8
I always think it is fun to make a video. This is one of the few times I made a narration for my own video, which was kind of awkward in the beginning but everything went smoothly after I getting used to it. The editing of the animation, in expect, taking me many time. I think Vegas indeed somehow got some limitation especially while making the animation. More motivation for me to master the Premiere.



Finished!
During the making of this prototyping, I kept finding that some part of the ideas can be developed. However, as redo of the idea would be unrealistic for now, I would have more thoughts on my next project before implementing the presentation of the prototype. Mostly I think it is an alright video prototyping. I included the problem statement, ways of solving the problem (mash up games with their fun features), the way of interaction, etc. Hopefully I could get valuable feedback on tomorrow's workshop.



*The Statement of Delivery would be uploaded before tomorrow workshop to Blackboard.

Wednesday, 12 August 2015

Video prototyping idea

Mashup plan: Pacman + Hangman + Snake and ladders

This post is just a possible idea of the prototype project.

The game would be using the Grid elements of the "Snake and Ladder". Therefore, this game is a digital-based board game, improved with the features of other games.

Game elements:
Players - would be distinguished as Pacman with different hats on.
Enemies - The ghost of the Pacman game, will be allocated randomly in the game grid .
Grid - Have tiles with different colour. The players would spin a colourful wheel to determine which tile to move onto.
Spin Wheel - Have different colours based on the colour of tiles on the grid. Each player is allowed to spin once in his or her round.
Power ups: A power-up icon in random tile, once player step onto it, another mini game would pop-up.

Mini game: Players smash the button (made by Makey Makey) to reach the ghost in the centre to add "Death symbol" to other lost players (Features of Hangman).

The game process:
1. Spin the wheel
2. Move based on color
3a. If on Ghost:   get a death symbol
3b. If on Power-up:  Mini game --- the winner add death symbol on the others
4. Those who reach 5 Death symbol in total lose the game instantly
5. Those who did not accumulate 5 symbols and reach the tops win OR the one only player left in the game



----Game needs to be developed before the implementation of Video prototype----

Tuesday, 11 August 2015

Week 3 in class exersice

Video Critique on week 3

    1.    Brisbane Parkfinder [https://www.youtube.com/watch?v=-ak3sKs-LVc]

First impression: 3/10
Concept: assist people to find the park
Raised questions: a) did not let the audience know what the problem is; b) use unfamiliar words in the video without explaining;
What do they do well: a) prototype is fairly good;  b) showed the context of using the app;
Video content: a) more visual assistance should be used; b) microphones should be wired to the announcer to get the voice clearer;

Overall, this video kind of explains the design concept, but the lack of visual assistance and poor voice editing made the delivery of concept unclear to the audience. The long shot taken on the main speaker is too long, which made the video content pretty boring to watch. The presentation of prototype is fairly good, however more interaction feature could be presented to the audience that indicates how the app actually works. 

    2.    Plain English Google Docs [https://www.youtube.com/watch?v=muVUA-sKcc4#t=22]

First impression: 9/10
Concept: share an online version of docs that allows other people to use it
Question: a) did not show the significance of the problem; 
Should do better: a) points out the problem that raises more consensus; b) create context; c)
Have done well: a) using paper prototype to replace the animation; 
Video content: a) clear use of paper prototyping; b) clear audio (a bit fast); c) the visual content is based on what the speaker says

This is a very good pitch video of presenting the product. Let alone that Google Doc has be universally used by people today, as this first came out in 2007, this video gave a clear presentation of how the product would improve the user experience of sending and sharing a certain file. Although the problem statement in the beginning of this video did not make the problem appear to be a significant one, the statement of what G Doc could change is clear and straightforward. Audience would find resonance of the context the video created and got interests in what G Doc could do. 
* Simple method of presenting the idea (paper prototype in this case) could make it easier for audience to understand sometimes. Even for a huge company like Google would use this cheap and simple way to deliver their ideas, which also works perfectly. 

    3.    Pegasus [https://www.kickstarter.com/projects/excelsiorgames/pegasus-the-next-generation-of-chess-0]
First impression: 0/10
Concept: cannot tell the game concept by the ideas
Question: What is this game? How does it work? Why is it fun to play? 
Should do better: …a lot
Have done well: music? (music can be distracting to the video content)

No explanation, no caption, only with music and animated steps of playing the game, all these elements made this pitch video a pretty bad example of what should not do to make a video for pitching your idea. It is important to allure the interest of audience while pitching a game. What the designer clearly understood would not be that easy to be understood by the audience, without any explanation, even though there are many explanation in the text followed by this video. However, if the video did not make audience be interested to the content, they would not bother reading the content followed. 
* Make the video content fun to watch and self-explainable. 

Best example:
Formlab 3D printer [https://www.kickstarter.com/projects/formlabs/form-1-an-affordable-professional-3d-printer]


           




Tuesday, 4 August 2015

Week 2 in class exercise

Challenge 1. Social faux pas wearables
Challenge 2. 3 game mash ups

+++ Design a prototype that uses AR
Think of a device you have at home, something you regularly use
think about your interaction with it
design variations to the way that you interact with the device, overall flow or specific aspects +++

A wrist band evaluating the surroundings of the wearer. The wrist band would have a meter indicating whether the wearer is making too much noise in different circumstances. The wrist band would also evaluate the language choosing of the wearer that if the wearer swear too much the wrist band would vibrate to notice the wearer to watch his or her language.:)


+++ Step 1, Pick one game from each of the list* and mash up into one game; Step 2, pick two games and select one of each feature, then create a new game of of those fun features. +++

The game was a mash up from Battleship and Minesweeper. The game kept the calculation featured in minesweeper, which tells the number of mines around the chosen area. The game also kept the distribution of ships in the battleship. The new game looks pretty much like the original battleship, but if the target was missed, a number would pop up as those in the minesweeper and tells the player how many pieces of ships are surrounded the area. In other once, in this improving version of battleships, players would not get nothing once they hit an empty grid.