This also includes the panoramic view I created using several printscreens of the sketchup file.
Monday, 28 April 2014
Sketchup: The main images used in the Flash file
Here are the screenshots from my Google Sketchup which I used as reference when creating my room in Flash. These images can also be found in the Flash file itself.
This also includes the panoramic view I created using several printscreens of the sketchup file.
This also includes the panoramic view I created using several printscreens of the sketchup file.
Distribution: Title, Thumbnails, Description and Controls
From writing my evaluation and covering the distribution I've decided to create the content which would be produced when distributing the game to the various different Flash Gaming websites.
Title
[No character limit] How I Escaped - The Waiting Room
[25 character limit] HIE - The Waiting Room / Escape: The Waiting Room
Thumbnails [Standard Sizes]
[140x90]
[250x200]
Description
Are you ready for the first in the series of How I Escaped? Great! Then your first room will be the Waiting Room. Forget all the arbitrary room escape games you've been playing, you're dealing with the big dogs now. Point and click through your surroundings to find clues which will not only help you escape the room but discover the story as to why you are there too! If you manage to escape from this room, you'll be good as gold to escape from a room in real life.
Controls
Mouse [Left Click] and Keyboard [Typing].
Title
[No character limit] How I Escaped - The Waiting Room
[25 character limit] HIE - The Waiting Room / Escape: The Waiting Room
Thumbnails [Standard Sizes]
[140x90]
Description
Are you ready for the first in the series of How I Escaped? Great! Then your first room will be the Waiting Room. Forget all the arbitrary room escape games you've been playing, you're dealing with the big dogs now. Point and click through your surroundings to find clues which will not only help you escape the room but discover the story as to why you are there too! If you manage to escape from this room, you'll be good as gold to escape from a room in real life.
Controls
Mouse [Left Click] and Keyboard [Typing].
Important Downloads: Font and Google Sketchup
Sunday, 27 April 2014
Evaluation: Audiences, Distribution and Cultural Context
For my artefact, I have created a Room Escape game. Usually, Room Escape games are likely to be either found as a browser based or as a mobile device game. I had chosen to go for the browser based game. In comparison to other browser based games I believe that Room Escape game definitely fits very well for the intended delivery platform. For this Evaluation I will be looking at the Audiences, Distribution / Delivery and Cultural Contexts / Genre. Overall this will cover the ludology of Flash games.
Audiences
As a whole I believe my game would be suitable for it's intended audience of age 13 and up. The intended primary audience for my game would have played room escape games before and are likely to have completed a few. With that being the case, I feel as though my room escape game should not be a problem for these users and they should be able to complete it in a suitable time of around 10 minutes. The secondary type of audience would be those who are browsing gaming websites such as Newgrounds and are finding games to play for fun. From doing my user testing, I've found that even these types of audiences do not struggle to complete my game. The concept of point and click would be easy to grasp for both intended audiences.
Distribution / Delivery
As my game has been exported as a SWF file this means that the game can be distributed across to many online gaming websites. The SWF format is widely accepted and many websites allow this type of submission. My game would be easy to distribute onto gaming websites and this process would typically involve creating an account with the companies website and submitting the game through their database. Although not a necessity, some authors may also choose to add adverts to their games before distribution has taken place. Due to the layout of my game, adverts would be easy to implement and would merely involve shifting frames to the right so that there is room for the advert [to display at the beginning]. Quality control is often used to ensure that games distributed to their sites are of good quality. This is normally done through a rating system as judge by the website's users. Due to the level of professionalism my artefact brings, the distribute of my game should not be of a problem, even with the quality control algorithms on these websites.
Cultural Contexts / Genre
Room Escape games have become very popular on the internet and has it's own genre. In comparison with other room escape games, my one "How I Escaped - The Waiting Room" fairs very well.
The duration it takes to complete my game, as found from using testing, takes 5-30 minutes on their first go. This in comparison to the other room escape games of that length is very similar.
I'm happy with how the visual of my game has turned out, for being vector drawn it hasn't turned out too much like a cartoon and that is mainly because there are not black lines outlining the objects. All types of art styles are suitable for Room Escape games, including photo realistic and simply just vector drawn, so in this regards my room escape game meets it's cultural contexts.
A negative point of my game could be that it did not have any instructions on how to play it, but many room escape games - such as Crimson Room - typically do not have instructions for the game but instead assume that the users would have the vernacular computer knowledge for these types of games. As these games would already be in the category of Room Escape, it would therefore be obvious what the user must do. From the beginning, as mentioned in this post, I made it my goal to make sure that the users challenge should be to figure out the puzzle, not figure out how to figure out the puzzle. I believe that with the title, genre and targeted audience, in game features such as the narration, side arrows and roll over arrows it would be clear enough for the user on how to navigate through the room without instructions.
Many room escape games nowadays have very arbitrary which have irrelevant number colour puzzles involved which you have to figure out in order to escape the room. This wasn't something I wanted to do, even if it would mean breaking the cultural contexts of how these games work. I wanted to make sure that the items and clues the users finds would be involved within the environment and to make sure that these are relevant for the user to escape. I feel as though I have done this very well and hope that more room escape games would take this approach.
Overall I believe that the Audience, Distribution and Cultural Contexts have all been met to the standards that I had originally hoped for. The artefact make not come off as being professional when compared to industry standard work, but that's not what I was going for. The various different room escape games are not always going to be professional and are often made in the developers spare time. I believe that my game is up to par with the other Flash made room escape games and in that regards, it is professional.
Audiences
As a whole I believe my game would be suitable for it's intended audience of age 13 and up. The intended primary audience for my game would have played room escape games before and are likely to have completed a few. With that being the case, I feel as though my room escape game should not be a problem for these users and they should be able to complete it in a suitable time of around 10 minutes. The secondary type of audience would be those who are browsing gaming websites such as Newgrounds and are finding games to play for fun. From doing my user testing, I've found that even these types of audiences do not struggle to complete my game. The concept of point and click would be easy to grasp for both intended audiences.
Distribution / Delivery
As my game has been exported as a SWF file this means that the game can be distributed across to many online gaming websites. The SWF format is widely accepted and many websites allow this type of submission. My game would be easy to distribute onto gaming websites and this process would typically involve creating an account with the companies website and submitting the game through their database. Although not a necessity, some authors may also choose to add adverts to their games before distribution has taken place. Due to the layout of my game, adverts would be easy to implement and would merely involve shifting frames to the right so that there is room for the advert [to display at the beginning]. Quality control is often used to ensure that games distributed to their sites are of good quality. This is normally done through a rating system as judge by the website's users. Due to the level of professionalism my artefact brings, the distribute of my game should not be of a problem, even with the quality control algorithms on these websites.
Cultural Contexts / Genre
Room Escape games have become very popular on the internet and has it's own genre. In comparison with other room escape games, my one "How I Escaped - The Waiting Room" fairs very well.
The duration it takes to complete my game, as found from using testing, takes 5-30 minutes on their first go. This in comparison to the other room escape games of that length is very similar.
I'm happy with how the visual of my game has turned out, for being vector drawn it hasn't turned out too much like a cartoon and that is mainly because there are not black lines outlining the objects. All types of art styles are suitable for Room Escape games, including photo realistic and simply just vector drawn, so in this regards my room escape game meets it's cultural contexts.
A negative point of my game could be that it did not have any instructions on how to play it, but many room escape games - such as Crimson Room - typically do not have instructions for the game but instead assume that the users would have the vernacular computer knowledge for these types of games. As these games would already be in the category of Room Escape, it would therefore be obvious what the user must do. From the beginning, as mentioned in this post, I made it my goal to make sure that the users challenge should be to figure out the puzzle, not figure out how to figure out the puzzle. I believe that with the title, genre and targeted audience, in game features such as the narration, side arrows and roll over arrows it would be clear enough for the user on how to navigate through the room without instructions.
Many room escape games nowadays have very arbitrary which have irrelevant number colour puzzles involved which you have to figure out in order to escape the room. This wasn't something I wanted to do, even if it would mean breaking the cultural contexts of how these games work. I wanted to make sure that the items and clues the users finds would be involved within the environment and to make sure that these are relevant for the user to escape. I feel as though I have done this very well and hope that more room escape games would take this approach.
Overall I believe that the Audience, Distribution and Cultural Contexts have all been met to the standards that I had originally hoped for. The artefact make not come off as being professional when compared to industry standard work, but that's not what I was going for. The various different room escape games are not always going to be professional and are often made in the developers spare time. I believe that my game is up to par with the other Flash made room escape games and in that regards, it is professional.
The Finished Game && Previous Versions [Download avaliable]
Throughout the course of making the game there have been sudden script / art changes which has resorted in me naming the files as new versions.
Each of these versions have been uploaded to the Newgrounds Dump for your access.
The Waiting Room [Final]
The game with music, sound effects and narration as well as some various other features changed.
The Waiting Room [V2]
The game was completed and had a different inventory system script.
The Waiting Room [V1]
This included the main appearance of my game, but only allowed the user to pick up one item.
The Waiting Room [Prototype]
This was created to get a rough idea on how I would script the inventory.
Saturday, 26 April 2014
Working Processes: Finishing The Game - Adding the Narration & Sound Effects, Cut Scene, Window contents, MOUSE_LEAVE and backToMainFromVending
Since I manged to get the sound for the narration of "It's locked" I decided to add the other narration clips as well as the sound effects.
To do this, I went back into Audacity and selected the narration clips I wanted and exported them individually.
I then imported them into Flash.
The main difference between the scripts for the narration and sound effects was that the sound effect scripts wasn't as advanced, this was because I did not need to make sure they would overlap. In fact, if they overlapped that would be even better.
The script, as mentioned in previous posts, for the narration looked like this:
whilst the sound effect script would be much simpler and only look like this
As I didn't create the sound effects, it meant that some sounds didn't start at the part I wished them to start. Instead of editing each sound in Audacity and re-exporting them. I instead used script to make sure they started in the right place.
The first number in the brackets affected where the sound would start whilst the second number affected how many times it would repeat. As I didn't need the sound to repeat, like I did for the music, I kept the number at 0.
I put the priority on the sound effects as I felt they were more important than the narration at this stage. After I had finished with the sound effects, I moved onto importing the rest of the narration.
When testing the game, I noticed that the narration could get a little annoying if they were repeated when doing the same actions. I put in booleans to registered if the sound had been used before, and made it so that when the booleans were true, the sound would no longer play. Some narrations, mainly the important ones, weren't limited with booleans as I felt it was important for the user to hear them again.
In the end, I didn't end up using all the narrations I had scripted. Too much narration would turn out to be bad and take the user away from the experience. I used narration where I felt it was necessary. Such as trying to read a note without enough light. Or trying to read the notebook without your glasses. This way the narration would let the user know that something wasn't right and had to be changed.
The majority of sound effects were obtained from http://www.freesfx.co.uk/
This was a really good website and contained sounds for nearly everything I wanted apart from the vending machine noise and a few others. A more detailed version of the sources can be found in my bibliography.
I then went onto the cutscene. This was very enjoyable to create. I took the viewMain frame and converter it all into a single movieclip. I then animated it with a tweet going left and right and back to the centre. I set the tweet to ease 100 so that it would look much smoother.
Since the protagonist had just woken up, I wanted to animate the eyes opening. I created a rectangle which filled the whole stage and used the select tool to curve the line upwards like an eyelid. I then tweened the eyelid upwards to imply that the protagonist had just opened their eyes. I selected the movieclip which contained the room and tween blurred it so that it only once the eyes were opened that it would be unblurred.
I then added the narration of "Where am I - I need to get out of here" onto frame 17 and then cutscene was finished. I made the Enter Name frame direct to the cutscene instead of the game, and I instead made the cutscene direct to the game after it had finished.
I then worked on the window. This was something which was referred to as many things in the user testing. Such as a widescreen TV or a blackboard. So I wanted to make sure it actually looked like a window.
I first took a picture with my camera mobile phone and cropped the image. I then imported this into Flash.
Instead of tracing around the image, I broke the image with ctrl+b. By doing so it meant that the image could now be trimmed in Flash.
I selected the Magic Wand tool, located in the Lasso Tool options and selected the sky. It selected the whole sky and I hit del on the keyboard.
I then turned the image into a silhouette by filling the rest of it in black, which was possible as I had already broken the image.
Afterwards I then went to the in game window and deleted the contents. In a new layer I placed this silhouette and used the Disort tool, located in the Free Transform Tool, to give it the right aspect.
After this had been done, I gave the background a gradient between Dark Grey and Orange.
I was very happy with the results:
I noticed, just like my supervisor had said, that the mouse didn't disappear once the mouse had left the stage. Instead the mouse, as a movieclip, would stay where it was just before the mouse had left.
As this was the case, I wanted to create a script which would make it so that the mouse would leave when not on the stage and come back when the mouse moved on the stage. This was a rather simple thing to accomplish.
My script looked like the following:
This worked great; but as expected, when the user would pick up an item a glitch would occur. This was because when an item is picked up the cursor would go invisible and instead of dragging the cursor, they would drag the item.
To solve this issue, I removed the eventListener on the start drag of an item and added it back on the stop drag of an item. This fixed the issue and it worked flawlessly.
There was now one more thing to change and that was one of the back buttons. As the vending machine is accessible from both the desk and the main view, when on the vending machine, I wanted it so that it would go back to the last view you were on instead of straight back to the main view. In order to do this, I created a boolean called backToMainFromVending.
backToMainFromVending was placed on the main view and set to true, the boolean was also placed on the desk and set to false. This way, I could add an if statement which would know where it was last time and take take the user back there. The script I coded was the following:
I added this script to the viewVending layer.
To do this, I went back into Audacity and selected the narration clips I wanted and exported them individually.
I then imported them into Flash.
The main difference between the scripts for the narration and sound effects was that the sound effect scripts wasn't as advanced, this was because I did not need to make sure they would overlap. In fact, if they overlapped that would be even better.
The script, as mentioned in previous posts, for the narration looked like this:
| if(narrateChannel!=narrateItsLocked){ narrateChannel=whatsThat.play(0,0,narrateTrans); } |
whilst the sound effect script would be much simpler and only look like this
| soundFXChannel=soundFXFuseDoorOpen.play(120,0,soundFXTrans); |
As I didn't create the sound effects, it meant that some sounds didn't start at the part I wished them to start. Instead of editing each sound in Audacity and re-exporting them. I instead used script to make sure they started in the right place.
The first number in the brackets affected where the sound would start whilst the second number affected how many times it would repeat. As I didn't need the sound to repeat, like I did for the music, I kept the number at 0.
I put the priority on the sound effects as I felt they were more important than the narration at this stage. After I had finished with the sound effects, I moved onto importing the rest of the narration.
When testing the game, I noticed that the narration could get a little annoying if they were repeated when doing the same actions. I put in booleans to registered if the sound had been used before, and made it so that when the booleans were true, the sound would no longer play. Some narrations, mainly the important ones, weren't limited with booleans as I felt it was important for the user to hear them again.
In the end, I didn't end up using all the narrations I had scripted. Too much narration would turn out to be bad and take the user away from the experience. I used narration where I felt it was necessary. Such as trying to read a note without enough light. Or trying to read the notebook without your glasses. This way the narration would let the user know that something wasn't right and had to be changed.
The majority of sound effects were obtained from http://www.freesfx.co.uk/
This was a really good website and contained sounds for nearly everything I wanted apart from the vending machine noise and a few others. A more detailed version of the sources can be found in my bibliography.
I then went onto the cutscene. This was very enjoyable to create. I took the viewMain frame and converter it all into a single movieclip. I then animated it with a tweet going left and right and back to the centre. I set the tweet to ease 100 so that it would look much smoother.
Since the protagonist had just woken up, I wanted to animate the eyes opening. I created a rectangle which filled the whole stage and used the select tool to curve the line upwards like an eyelid. I then tweened the eyelid upwards to imply that the protagonist had just opened their eyes. I selected the movieclip which contained the room and tween blurred it so that it only once the eyes were opened that it would be unblurred.
I then added the narration of "Where am I - I need to get out of here" onto frame 17 and then cutscene was finished. I made the Enter Name frame direct to the cutscene instead of the game, and I instead made the cutscene direct to the game after it had finished.
I then worked on the window. This was something which was referred to as many things in the user testing. Such as a widescreen TV or a blackboard. So I wanted to make sure it actually looked like a window.
I first took a picture with my camera mobile phone and cropped the image. I then imported this into Flash.
Instead of tracing around the image, I broke the image with ctrl+b. By doing so it meant that the image could now be trimmed in Flash.
I selected the Magic Wand tool, located in the Lasso Tool options and selected the sky. It selected the whole sky and I hit del on the keyboard.
I then turned the image into a silhouette by filling the rest of it in black, which was possible as I had already broken the image.
Afterwards I then went to the in game window and deleted the contents. In a new layer I placed this silhouette and used the Disort tool, located in the Free Transform Tool, to give it the right aspect.
After this had been done, I gave the background a gradient between Dark Grey and Orange.
I was very happy with the results:
I noticed, just like my supervisor had said, that the mouse didn't disappear once the mouse had left the stage. Instead the mouse, as a movieclip, would stay where it was just before the mouse had left.
As this was the case, I wanted to create a script which would make it so that the mouse would leave when not on the stage and come back when the mouse moved on the stage. This was a rather simple thing to accomplish.
My script looked like the following:
| stage.addEventListener(Event.MOUSE_LEAVE, cursorHide); stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorFollow); function cursorHide(evt:Event):void { if(cursor_mc.visible==true){ cursor_mc.visible=false; } } function cursorFollow(evt:Event):void { cursor_mc.visible=true; } |
This worked great; but as expected, when the user would pick up an item a glitch would occur. This was because when an item is picked up the cursor would go invisible and instead of dragging the cursor, they would drag the item.
To solve this issue, I removed the eventListener on the start drag of an item and added it back on the stop drag of an item. This fixed the issue and it worked flawlessly.
There was now one more thing to change and that was one of the back buttons. As the vending machine is accessible from both the desk and the main view, when on the vending machine, I wanted it so that it would go back to the last view you were on instead of straight back to the main view. In order to do this, I created a boolean called backToMainFromVending.
backToMainFromVending was placed on the main view and set to true, the boolean was also placed on the desk and set to false. This way, I could add an if statement which would know where it was last time and take take the user back there. The script I coded was the following:
| back_btn.addEventListener(MouseEvent.CLICK,backtoMainXRightListener); backSide_btns.addEventListener(MouseEvent.CLICK,backtoMainXRightListener); function backtoMainXRightListener(ev:MouseEvent):void { if (!backToMainFromVending) { trace("viewTable from Vending"+backToMainFromVending); gotoAndStop("viewTable"); back_btn.removeEventListener(MouseEvent.CLICK,backtoMainXRightListener); backSide_btns.removeEventListener(MouseEvent.CLICK,backtoMainXRightListener); stage.removeEventListener(Event.ENTER_FRAME, receiptHitVNumbersListener); } else if (backToMainFromVending){ trace("viewMain from Vending"+backToMainFromVending); gotoAndStop("viewMain"); roomView.x=-605.25; back_btn.removeEventListener(MouseEvent.CLICK,backtoMainXRightListener); backSide_btns.removeEventListener(MouseEvent.CLICK,backtoMainXRightListener); stage.removeEventListener(Event.ENTER_FRAME, receiptHitVNumbersListener); } } |
I added this script to the viewVending layer.
Friday, 25 April 2014
Working Processes / Planning - Feedback from User Testing [6]
I user tested my game again to see what time it would take them to complete it.
This user took 14 minutes to complete the game.
So far the times taken to complete the game are as follows:
12 minutes
14 minutes
7 minutes
13 minutes
14 minutes
7 minutes
28 minutes
18 minutes
14 minutes
The average time taken to complete the game is now: 14 minutes. Brilliant!
This user took 14 minutes to complete the game.
So far the times taken to complete the game are as follows:
12 minutes
14 minutes
7 minutes
13 minutes
14 minutes
7 minutes
28 minutes
18 minutes
14 minutes
The average time taken to complete the game is now: 14 minutes. Brilliant!
Working Processes: Finalising The Game - Adding reset and tweet button to end of the game.
Upon completing the game, I decided it would be a good idea if the user would be able to restart the game and play it again.
I also wanted to make it so that the user would be able to tweet out their time to their friends.
I used the following code for the buttons:
I am happy with the results.
Something important to mention is that the Tweet button will not work on the SWF or HTML file due to the security of ones SWF settings. The Tweet button will however work on files uploaded to the internet or directly in the FLA.
You can test this on an internet uploaded version here:
http://www.newgrounds.com/dump/item/fd0ee4a166a9a3018e4c096b3744a3b6
I also wanted to make it so that the user would be able to tweet out their time to their friends.
I used the following code for the buttons:
| // ---------Buttons--------- //Reset Button reset_btn.addEventListener(MouseEvent.CLICK,resetListener); function resetListener(ev:MouseEvent):void { gotoAndStop("enterName"); } //Tweet Button tweet_btn.addEventListener(MouseEvent.CLICK,tweetListener); function tweetListener(ev:MouseEvent):void { navigateToURL(new URLRequest("http://twitter.com/home?status= I just completed The Waiting Room in "+fl_MinutesElapsed + " Minutes and " + fl_SecondsElapsed +" Seconds!! BEAT THAT! http://tinyurl.com/mflhvk4"),'_blank'); } |
I am happy with the results.
Something important to mention is that the Tweet button will not work on the SWF or HTML file due to the security of ones SWF settings. The Tweet button will however work on files uploaded to the internet or directly in the FLA.
You can test this on an internet uploaded version here:
http://www.newgrounds.com/dump/item/fd0ee4a166a9a3018e4c096b3744a3b6
Working Processes: Finalising the Game - Scripting the narration sound
I imported the soundclip I exported for testing purposes
For the narration, I decided to use a different SoundChannel and SoundTransform.
I added a script similar to that of the music, to add the sound effect.
I wanted the sound to play if the door was locked.
Here is the code I used originally:
This script was placed inside the button of the door.
The problem with the script was that every time the door was clicked the sound would play on top of itself.
I needed a way so that this would not happen.
At first I tried:
This was a good idea but it did not work.
I noticed that the channel would be null (hasn't been set to any sound) until a sound was played. After it's played the sound it was no longer set to null. Knowing this I tried the following script:
This worked... but it wasn't to the extent I wanted.
My script made it so that it would only play once null. If it wasn't null, then it would make it null.
By doing so, it added a delay so that the script would only play the sound every other time you press it. Which meant that the sound would still overlap, it would take two clicks instead of one.
I then searched through the internet to find a script which acknowledge when the sound would stop playing. This was known as SOUND_COMPLETE.
I used the following script:
This caused the following error:
Cannot access a property or method of a null object reference.
This meant that the script couldn't find when the sound was complete because it was on null.
I then adjusted the placement of the eventlistener, so it would not search for it straight away, but instead when the button was pressed.
My script now looked like this:
This way the eventListener would be played only after the channel had been set.
The script worked perfectly.
I used these to help me add the sounds:
http://www.trainingtutorials101.com/2010/01/adjusting-volume-in-flash-actionscript.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Sound.html#play%28%29
For the narration, I decided to use a different SoundChannel and SoundTransform.
I added a script similar to that of the music, to add the sound effect.
I wanted the sound to play if the door was locked.
Here is the code I used originally:
| if(!doorUnlocked){ trace("Door is jammed shut"); narrateChannel=narrateItsLocked.play(0,0,narrateTrans); } |
This script was placed inside the button of the door.
The problem with the script was that every time the door was clicked the sound would play on top of itself.
I needed a way so that this would not happen.
At first I tried:
| if(narrateChannel!=narrateItsLocked){ narrateChannel=whatsThat.play(0,0,narrateTrans); } |
This was a good idea but it did not work.
I noticed that the channel would be null (hasn't been set to any sound) until a sound was played. After it's played the sound it was no longer set to null. Knowing this I tried the following script:
| if(!narrateChannel){ Channel=narrateItsLocked.play(0,0,narrateTrans); } else if (narrateChannel){ Channel=null; } |
This worked... but it wasn't to the extent I wanted.
My script made it so that it would only play once null. If it wasn't null, then it would make it null.
By doing so, it added a delay so that the script would only play the sound every other time you press it. Which meant that the sound would still overlap, it would take two clicks instead of one.
I then searched through the internet to find a script which acknowledge when the sound would stop playing. This was known as SOUND_COMPLETE.
I used the following script:
| if(!narrateChannel){ trace("1 narrateChannel "+narrateChannel); narrateChannel=narrateItsLocked.play(0,0,narrateTrans); trace("2 narrateChannel"+narrateChannel); } narrateChannel.addEventListener(Event.SOUND_COMPLETE,onSoundChannelSoundComplete); function onSoundChannelSoundComplete(e:Event):void{ trace("done"); narrateChannel=null; } |
This caused the following error:
Cannot access a property or method of a null object reference.
This meant that the script couldn't find when the sound was complete because it was on null.
I then adjusted the placement of the eventlistener, so it would not search for it straight away, but instead when the button was pressed.
My script now looked like this:
| if(!narrateChannel){ trace("1 narrateChannel "+narrateChannel); narrateChannel=narrateItsLocked.play(0,0,narrateTrans); trace("2 narrateChannel"+narrateChannel); narrateChannel.addEventListener(Event.SOUND_COMPLETE,onSoundChannelSoundComplete); } function onSoundChannelSoundComplete(e:Event):void{ trace("done"); narrateChannel=null; } |
This way the eventListener would be played only after the channel had been set.
The script worked perfectly.
I used these to help me add the sounds:
http://www.trainingtutorials101.com/2010/01/adjusting-volume-in-flash-actionscript.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Sound.html#play%28%29
Working Processes: Finalising the Game - Recording the narration
Using the script I created here, I recorded myself in the software audacity saying the lines.
As there were a lot of white noise I had to remove it.
Here is the processes I went though.
1) Recorded the narration for the whole script so far.
2) Recorded white noise without speaking.
3) Selected the white noise and used it as a noise profile in the Noise Removal option
4) Selected the narration and applied the noise profile it from the Noise Removal option
5) Here was the results.
With that done, I then selected a line snippet and exported it as an MP3. I will first use this sound snippet for testing purposes before exporting the rest.
As there were a lot of white noise I had to remove it.
Here is the processes I went though.
1) Recorded the narration for the whole script so far.
2) Recorded white noise without speaking.
3) Selected the white noise and used it as a noise profile in the Noise Removal option
4) Selected the narration and applied the noise profile it from the Noise Removal option
5) Here was the results.
With that done, I then selected a line snippet and exported it as an MP3. I will first use this sound snippet for testing purposes before exporting the rest.
Thursday, 24 April 2014
Working Processes: Finalising the Game - Adding vending arrow, Fixing the timer
I realised that it may not be obvious to all users straight away that they can click the bottom of the vending machine to get to the dispenser. To make it more noticable, instead of adding an arrow which is always visible. I changed the over state of the button at the bottom of the vending machine so that an arrow will appear if the users mouse is over the button [at the bottom of the vending machine].
Whilst getting the music to work, and note overlap itself once the user goes back to the menu, I discovered a glitch.
The timer which I have put in place goes faster the more times you visit the menu. The reason for this is that the fl_SecondsElapsed++; is called once again.
To fix this issue, I created a boolean and inserted the Timer and EventListener inside it's if(statement)
I used the following code:
With this, the timer would now only be called once if it's on false. After the timer is called the boolean is set to true and now it will no longer recall the timer.
Whilst getting the music to work, and note overlap itself once the user goes back to the menu, I discovered a glitch.
The timer which I have put in place goes faster the more times you visit the menu. The reason for this is that the fl_SecondsElapsed++; is called once again.
To fix this issue, I created a boolean and inserted the Timer and EventListener inside it's if(statement)
I used the following code:
| if (!timerSet) { var fl_TimerInstance:Timer=new Timer(1000,3000); fl_TimerInstance.addEventListener(TimerEvent.TIMER, fl_TimerHandler); timerSet=true; } |
With this, the timer would now only be called once if it's on false. After the timer is called the boolean is set to true and now it will no longer recall the timer.
Working Processes: Finalising the Game - Adding the music
Instead of adding the music through the timeline properties, I instead done it through code.
This way, I would be able to adjust the volume of the music more easily as I feel that once I add the narration or sound effects, the music may be too loud to hear the rest.
The first thing I did was create import the video and give it a class name of soundTrack. With this I was able to add a SoundTransform for the volume and give the soundTrack a channel
Here is the code I used:
I then created a boolean called musicPlaying and set it to false
I then used the following script:
This script made it so that the music would only play if the boolean is set on false. By doing this I would avoid the music playing on top of itself once I revisit that frame.
The first 0 shows the start time, whilst the 1000 represents how many times the song will be repeated.
This way, I would be able to adjust the volume of the music more easily as I feel that once I add the narration or sound effects, the music may be too loud to hear the rest.
The first thing I did was create import the video and give it a class name of soundTrack. With this I was able to add a SoundTransform for the volume and give the soundTrack a channel
Here is the code I used:
| var letItGoShort:Sound = new soundTrack(); var trans:SoundTransform = new SoundTransform(0.5, 0); var channel:SoundChannel; |
I then created a boolean called musicPlaying and set it to false
I then used the following script:
| if(!musicPlaying){ channel = letItGoShort.play(0, 1000 , trans); musicPlaying=true; } |
This script made it so that the music would only play if the boolean is set on false. By doing this I would avoid the music playing on top of itself once I revisit that frame.
The first 0 shows the start time, whilst the 1000 represents how many times the song will be repeated.
Working Processes: Finalising the Game - Editing the game from Supervisors feedback.
I managed to fix all of the things Daniel had mentioned in our tutorial from Yesterday.
The first thing I fixed was the back button.
At first, I thought it would be a good idea to merely go into the button, and change it's HIT state increasing the area of which the button can be clicked on. I added long rectangles on either side of the Flash and tested the game.
I realised that this would not work since the back button disappears if the users mouse is not at the bottom of the screen. Meaning that the additional hitstate would only be clickable once the users mouse is at the bottom.
In order to impliment the side back buttons which my supervisor stated would be a good idea. I created a new button and called the instance "backSide_btns". With this, instead of typing out a new function for this button or even copying and pasting the function from the previous button. I merely reused the exact same event listener to the new button and applied it to all the places accordingly.
back_btn.addEventListener(MouseEvent.CLICK,backtoMainListener);
backSide_btns.addEventListener(MouseEvent.CLICK,backtoMainListener);
The next part I modified was the pictures, I decreased the saturation of the picture frames so that they would suit the pastel colour look I was going for. I then traced over 2 of the portraits and coloured them in. I took a screen capture of this and sent it to my Supervisor Daniel so that he could see the results before I proceeded with the others.
He instantly replied and stated that they were looking much better and suiting the games appearance much more. Due to this I continued to transform the others.
Then I modified the inventory, instead of having it so that a message appeared stating inventory as the bottom. I changed it so that there would be a button at the bottom to indicate that there was something there. This way it would be much more noticeable for the users playing the game.
I then changed the code which affected the display of the inventory
So whenever the bottomBar (inventory) would disppear, the inventory_btn would appear and visa versa.
Finally, I went onto the colouring of the screen. Here are two screen captures of the difference in colours for the screen.
Before
After
I then went onto changing the appearance of the password on the note.
I rotated the curve of the "r" so that it was closer together and easier to distinguish from a "v".
Before
After
Overall, I have very happy with the results obtained from my supervisors feedback!
The first thing I fixed was the back button.
At first, I thought it would be a good idea to merely go into the button, and change it's HIT state increasing the area of which the button can be clicked on. I added long rectangles on either side of the Flash and tested the game.
I realised that this would not work since the back button disappears if the users mouse is not at the bottom of the screen. Meaning that the additional hitstate would only be clickable once the users mouse is at the bottom.
In order to impliment the side back buttons which my supervisor stated would be a good idea. I created a new button and called the instance "backSide_btns". With this, instead of typing out a new function for this button or even copying and pasting the function from the previous button. I merely reused the exact same event listener to the new button and applied it to all the places accordingly.
back_btn.addEventListener(MouseEvent.CLICK,backtoMainListener);
backSide_btns.addEventListener(MouseEvent.CLICK,backtoMainListener);
The next part I modified was the pictures, I decreased the saturation of the picture frames so that they would suit the pastel colour look I was going for. I then traced over 2 of the portraits and coloured them in. I took a screen capture of this and sent it to my Supervisor Daniel so that he could see the results before I proceeded with the others.
He instantly replied and stated that they were looking much better and suiting the games appearance much more. Due to this I continued to transform the others.
Then I modified the inventory, instead of having it so that a message appeared stating inventory as the bottom. I changed it so that there would be a button at the bottom to indicate that there was something there. This way it would be much more noticeable for the users playing the game.
| if (mouseY <450) { menu_btn.visible=false; bottomBar.visible=false; inventory_btn.visible=true; if (currentFrameLabel!="viewMain") { back_btn.visible=false; } } |
So whenever the bottomBar (inventory) would disppear, the inventory_btn would appear and visa versa.
Finally, I went onto the colouring of the screen. Here are two screen captures of the difference in colours for the screen.
Before
After
I then went onto changing the appearance of the password on the note.
I rotated the curve of the "r" so that it was closer together and easier to distinguish from a "v".
Before
Wednesday, 23 April 2014
Supervisor Tutorial 8: Inventory indication, back button additions, changes to pictures, and computer screen.
Today I had my file tutorial with my supervisor.
It was the first time he had seen my work since the prior to the Easter Holidays.
Daniel played through the game. To save time, I gave him tips on how to go about completing the game.
After he played through it, he suggested many things which I should change.
Daniel stated the following things:
As well as the pictures in the picture frames looking too realistic in comparison to the game, Daniel also stated that three of the people in the picture frames are of celebrities as this is a bad thing as it takes you away from the experience. As this is the case, I -as mentioned above- will be tracing over those people and they will in turn be not only suit the rest of the games aesthetics but also won't resemble the celebrities they once did.
Daniel also stated that I should be careful with music choice. Once I showed him the music I had thought about using, he stated that he thought that the music suited the piece very well.
As I plan to finish this before Monday, as I would like to hand it in a day early [in case transport is bad], I will need to complete the fixes and add narration before Sunday ends.
It was the first time he had seen my work since the prior to the Easter Holidays.
Daniel played through the game. To save time, I gave him tips on how to go about completing the game.
After he played through it, he suggested many things which I should change.
Daniel stated the following things:
| Problem | Solve |
| "Inventory at bottom" - displayed too fast | Choose a different method to indicate inventory |
| Back button - does not feel natural | Have alternative methods to go back (clicking on side of screen) |
| Change pictures from frames - too realistic | Trace over them with the pen tool |
| Change colour of picture frames - doesn't fit with pastel theme | Find appropriate colours |
| Screen's blue doesn't fit colour theme | Find a pastel blue |
| The password r looks like a v | Modify text |
As well as the pictures in the picture frames looking too realistic in comparison to the game, Daniel also stated that three of the people in the picture frames are of celebrities as this is a bad thing as it takes you away from the experience. As this is the case, I -as mentioned above- will be tracing over those people and they will in turn be not only suit the rest of the games aesthetics but also won't resemble the celebrities they once did.
Daniel also stated that I should be careful with music choice. Once I showed him the music I had thought about using, he stated that he thought that the music suited the piece very well.
As I plan to finish this before Monday, as I would like to hand it in a day early [in case transport is bad], I will need to complete the fixes and add narration before Sunday ends.
Tuesday, 22 April 2014
Working Processes / Planning - Feedback from User Testing [5]
Today, I did user testing to see how long it would take others to complete the game. Upon doing so, it also helped me find another glitch.
The times were as follows:
28 minutes
18 minutes
The glitch was that when the user put on their glasses whilst already viewing the note, the note would not unblur and instead the user would have to close the note and open it up again.
This was because there was not an event listener looking over this.
To solve this issue, I added onto the classes check event listener so that the note would be included too.
Originally the note was not included in this, because the note was only accessible from one camera angle - "viewTable".
I added the following if statement:
the code now looked like:
This fixed the glitch.
The times were as follows:
28 minutes
18 minutes
The glitch was that when the user put on their glasses whilst already viewing the note, the note would not unblur and instead the user would have to close the note and open it up again.
This was because there was not an event listener looking over this.
To solve this issue, I added onto the classes check event listener so that the note would be included too.
Originally the note was not included in this, because the note was only accessible from one camera angle - "viewTable".
I added the following if statement:
| if(currentFrameLabel=="viewTable"){ desknoteZoom.gotoAndStop(1); } |
the code now looked like:
| // ---------Item Checks--------- //Glasses On stage.addEventListener(Event.ENTER_FRAME, glassesOnCheck); function glassesOnCheck(event:Event) { if (!glassesOn) { notebookOpen.gotoAndStop(2); canMessageBox.gotoAndStop(2); canMessageBox.cutMsg_btn.visible=false; } else if (glassesOn){ notebookOpen.gotoAndStop(1); canMessageBox.gotoAndStop(1); canMessageBox.cutMsg_btn.visible=true; if(currentFrameLabel=="viewTable"){ desknoteZoom.gotoAndStop(1); } } } |
This fixed the glitch.
Planning: Voice Over Script
Here is my plan on the types of things I wish the narration to be like. For instance, when the user puts on the glasses, the narration would say "now I can see".
Other narration parts would involve the following:
Where am I? I need to get out of here
It's locked!
Oh
I've got my glasses
Now I can see
I can't read that without my glasses
This might come in handy
I need more light
Hmmm...
There that's better
A key..
I can't read this without my glasses
I need more light
Hmm, this receipt could come in handy
I should really know what I'm looking for before ordering something
Amnezol, what's that?
I can't reach that
That's out of my reach
Great
Causes Memory Loss
Hmm, I should try to fix this
What's that?
It worked!
At last!
The script will give the user clues on how to complete the game but will not feed the user the answers such as:
Maybe I should check the bin for a receipt
Other narration parts would involve the following:
Where am I? I need to get out of here
It's locked!
Oh
I've got my glasses
Now I can see
I can't read that without my glasses
This might come in handy
I need more light
Hmmm...
There that's better
A key..
I can't read this without my glasses
I need more light
Hmm, this receipt could come in handy
I should really know what I'm looking for before ordering something
Amnezol, what's that?
I can't reach that
That's out of my reach
Great
Causes Memory Loss
Hmm, I should try to fix this
What's that?
It worked!
At last!
The script will give the user clues on how to complete the game but will not feed the user the answers such as:
Maybe I should check the bin for a receipt
Monday, 21 April 2014
Working Processes: Finalising the Game - Easter Eggs
Easter was yesterday, so here's a post on the Easter Eggs I added to the game.
My Supervisor's (Daniel) logo is on the keyboard. This can be seen on the viewTable frame. The logo has replaced the Windows logo normally on the keyboards.
Daniel's logo is also placed on the screws of the shelf on the viewShelfBox frame.
Finally, when viewing the FLA file a hidden message will appear on the vending machine. This message will not be found whilst playing the game live.
Although these easter eggs were rather pointless, many of games nowadays have something hidden and I wanted to incorporate this in my game too. None of the easter eggs would be noticeable to the users unless they zoomed in really closely to the SWF and managed to de-compile the SWF to get the FLA file.
My Supervisor's (Daniel) logo is on the keyboard. This can be seen on the viewTable frame. The logo has replaced the Windows logo normally on the keyboards.
Daniel's logo is also placed on the screws of the shelf on the viewShelfBox frame.
Finally, when viewing the FLA file a hidden message will appear on the vending machine. This message will not be found whilst playing the game live.
Although these easter eggs were rather pointless, many of games nowadays have something hidden and I wanted to incorporate this in my game too. None of the easter eggs would be noticeable to the users unless they zoomed in really closely to the SWF and managed to de-compile the SWF to get the FLA file.
Sunday, 20 April 2014
Working Processes / Planning - Feedback from User Testing [4]
I have had several people play the game now, the main intention of which is to find out how long it takes them to complete the game. The results include of the results I've had:
12 minutes
14 minutes
7 minutes
13 minutes
14 minutes
7 minutes
Overall, the average time it has taken users to complete it is 11 minutes.
No other feedback has been given, on how to improve the game, from user testing this time. This is good as it means that the game is pretty fixed, however it can be bad as there is always room for improvement.
12 minutes
14 minutes
7 minutes
13 minutes
14 minutes
7 minutes
Overall, the average time it has taken users to complete it is 11 minutes.
No other feedback has been given, on how to improve the game, from user testing this time. This is good as it means that the game is pretty fixed, however it can be bad as there is always room for improvement.
Working Processes: Finalising the Game - Incorrect password, fixing can duplication and other issues
Today, the first thing I did was fix the password displayed on the notebook. The C was too close to the 4 making the 4 look like an A. This is an issue as it could make the user type in the wrong code.
To fix this issue, instead of adding a space between the C and the 4 I instead modified the letter spacing in the character properties panel.
Before
After
To fix the can glitch, as found in the user testing. I created a boolean called drugCan found and set it to true once the item was picked up.
I then made the following if statement and inserted into the actions layer of the viewVendingDispenser frame:
I noticed that users would not need to log into the computer and insert the lightbulb in order to complete the game. Of course to do this, the user would need to know (or at least guess) which code from the notebook to use and they would have needed to know the computer's password from playing the game before.
In order to make it so that the user would have to do every option before escaping. I created a boolean which when set to false made it so that you could not enter the vending machine code and was set to true once you log into the computer. This way, the user would have to log into the computer, in turn making the boolean true, allowing the user to use the vending machine.
To solve the issue of why they would need to log into the computer before typing the code in, I will later narrate something along the lines of "I don't know what I'm looking for so I'd better leave this for now".
As for the notebook, I have now introduced the same system I implemented for the desk note. The user must turn on the lamp first otherwise there will not be enough light to read it.
Before for the notebook, all that was required was glasses to be put on so that it wasn't blurry.
To do this I used the following code
Due to the format of the code, the blurriness of the note would not affect the note unless the lamp is on. Which is ideal as the user would not have access to the note without the lamp being on.
To fix this issue, instead of adding a space between the C and the 4 I instead modified the letter spacing in the character properties panel.
Before
After
To fix the can glitch, as found in the user testing. I created a boolean called drugCan found and set it to true once the item was picked up.
I then made the following if statement and inserted into the actions layer of the viewVendingDispenser frame:
| if (drugCanFound){ vendingDispenserView.itemDrugCan_btn.visible=false; } |
I noticed that users would not need to log into the computer and insert the lightbulb in order to complete the game. Of course to do this, the user would need to know (or at least guess) which code from the notebook to use and they would have needed to know the computer's password from playing the game before.
In order to make it so that the user would have to do every option before escaping. I created a boolean which when set to false made it so that you could not enter the vending machine code and was set to true once you log into the computer. This way, the user would have to log into the computer, in turn making the boolean true, allowing the user to use the vending machine.
To solve the issue of why they would need to log into the computer before typing the code in, I will later narrate something along the lines of "I don't know what I'm looking for so I'd better leave this for now".
As for the notebook, I have now introduced the same system I implemented for the desk note. The user must turn on the lamp first otherwise there will not be enough light to read it.
Before for the notebook, all that was required was glasses to be put on so that it wasn't blurry.
To do this I used the following code
| tableView.tableViewNote_btn.addEventListener(MouseEvent.CLICK,tableViewNoteListener); function tableViewNoteListener(ev:MouseEvent):void { if (lightbulbFound && inventorySystem.indexOf("itemLightbulb")==-1) { if (! glassesOn) { desknoteZoom.visible=true; desknoteZoom.gotoAndStop(2); } else if (glassesOn) { desknoteZoom.visible=true; desknoteZoom.gotoAndStop(1); } } else{ textAppear.textBoxAnim.item_txt.text="NOT ENOUGH LIGHT TO READ"; textAppear.gotoAndPlay(1); } } |
Due to the format of the code, the blurriness of the note would not affect the note unless the lamp is on. Which is ideal as the user would not have access to the note without the lamp being on.
Saturday, 19 April 2014
Working Processes / Planning: Feedback from User Testing [3]
Today, when doing the user testing. The user found a glitch which allowed the drug cans to be duplicated.
Below is a printscreen from the game with the cans duplicated and cut.
The glitch would occur when the user left the vending machine dispenser and came back.
To fix this glitch a boolean will need to be created and set to true once the can has been collected. An if statement will be added so that the can will only appear if the boolean is set to false.
The user also pointed out that the 4 looks like an A due to the C. This is the second time a user has pointed out this issue, so I will fix it straight away as well as fixing the can duplication glitch.
It took this user 7 minutes to complete the game, which is the fastest time so far.
Below is a printscreen from the game with the cans duplicated and cut.
The glitch would occur when the user left the vending machine dispenser and came back.
To fix this glitch a boolean will need to be created and set to true once the can has been collected. An if statement will be added so that the can will only appear if the boolean is set to false.
The user also pointed out that the 4 looks like an A due to the C. This is the second time a user has pointed out this issue, so I will fix it straight away as well as fixing the can duplication glitch.
It took this user 7 minutes to complete the game, which is the fastest time so far.
Working Processes / Planning: Finalising the Game - Cutting can, Scripting fuse box, door animation, timer, updating the graphics of viewTable
Today, I finished creating the game.
All the main scripting has been complete and is fully functional in regards to completing the game. As far as I'm aware, there are also no more glitches or errors within the code.
As for adding narration to the piece, I am unsure as to whether this would go well with the artefact or whether it will take it away from the user experiecing how to Escape the Room themselves.
Perhaps, the narration would be just used in the cutscene instead and not throughout the game.
I will find out the best route to take with this from my tutorial with Daniel, coming up on the 3rd of April.
To getting to this stage of the production processes I had to complete the following things.
I had to script it so that the user was able to cut the cut into half
I made it so that when you click on the can, it pops like, like the notebook or desk note would have. This way, the user can read the contents of the can. I then added a button for the user to click to cut the can. Upon clicking the button, the can would be removed from the inventory and the cut can would be added.
If the user is not wearing their glasses, the ability to cut the can will not be accessible and therefore have a 50% with the event listener removed. Once the user wears their glasses, the contents of the can will be unblurred allowing the user to not only read the can but now cut it too.
I feel that this is important so that the user is aware of the content on the can.
Since the user must wear the glasses to read the notebook or note, it is unlikely the user will be able to get this far in the game without wearing the glasses in the first place. This script was added more so for users who are coming back to beat their score.
I then had to create the script for the fuse box. This was a simple hit test for the cut can and the fuse box. When adding this script, I had to make sure that the script would not work if the fuse box doors were close. In order to do this, I made sure that the script didn't work on frame 1 of the fuse box MC.
My script was the following:
This script also made it so that if the cut can was to be dragged whilst the fuse box doors were close (on frame 1 of the MC), that the child would be removed before opening the doors. This way, the hittests of the cut can dragged onto the stage (before the door was opened), would not interfere with the acitivated hittest when the doors were opened.
Afterwards, I created the boolean doorUnlocked.
This way I could make it so that the door will unlock as soon as the cut can has been dragged onto the fuse box.
The lights will also turn on when this happens, to do this, the movieclip overTint has been set to false.
I then went to the door camera angle and animated is so that when the doorUnlocked boolean is set to true, the screen turns black and takes you to the completed game label.
Once here, I added a timer.
In a tutorial with Dan, we discussed it would be a bad idea to add a timer which would be visible throughout playing the game as it would make the user play the game differently. By having it so that the time is displayed at the end of the game, it makes the users more relaxed on their first play through as they don't realise it is there and are able to play the game properly.
To create this timer, I used the timer from the "Code Snippits" from the windows toolbar. Here various codes were accessible including a timer. This timer however only worked in seconds.
The code was the following:
I read the code and figured out how it worked, I then managed to come up with an idea on how I could involve minutes too. The code changed to the following:
So when fl_SecondsElapsed == 60, I would reset it to 0 and add 1 to the minutes.
This worked very well and was ideal.
Finally, I then went back to the viewTable and completed the art for that camera angle. Originally I had not done this as I felt that the scripting of the game was more important than the appearance.
Before
After
Once complete, I was very happy with the results.
As for adding narration to the piece, I am unsure as to whether this would go well with the artefact or whether it will take it away from the user experiecing how to Escape the Room themselves.
Perhaps, the narration would be just used in the cutscene instead and not throughout the game.
I will find out the best route to take with this from my tutorial with Daniel, coming up on the 3rd of April.
To getting to this stage of the production processes I had to complete the following things.
I had to script it so that the user was able to cut the cut into half
I made it so that when you click on the can, it pops like, like the notebook or desk note would have. This way, the user can read the contents of the can. I then added a button for the user to click to cut the can. Upon clicking the button, the can would be removed from the inventory and the cut can would be added.
If the user is not wearing their glasses, the ability to cut the can will not be accessible and therefore have a 50% with the event listener removed. Once the user wears their glasses, the contents of the can will be unblurred allowing the user to not only read the can but now cut it too.
I feel that this is important so that the user is aware of the content on the can.
Since the user must wear the glasses to read the notebook or note, it is unlikely the user will be able to get this far in the game without wearing the glasses in the first place. This script was added more so for users who are coming back to beat their score.
I then had to create the script for the fuse box. This was a simple hit test for the cut can and the fuse box. When adding this script, I had to make sure that the script would not work if the fuse box doors were close. In order to do this, I made sure that the script didn't work on frame 1 of the fuse box MC.
My script was the following:
| // ---------Hit test item--------- // hittest cut can and fusebox; stage.addEventListener(Event.ENTER_FRAME, canCutHitFuseBoxListener); function canCutHitFuseBoxListener(event:Event):void { if (drugCanFound) { if (canCutMove.hitTestObject(shelfBoxView.insertCanHittest)) { if (stage.contains(canCutMove)&&shelfBoxView.currentFrame==1) { trace("yes, child (canCutMove) is there and going to be removed"); removeChild(canCutMove); canCutGrab=3; } else { //lightbulbInserted=true; inventorySystem.splice(inventorySystem.indexOf("itemCanCut"),1); ifFullPassItem(); //if (lightbulbInserted) { trace("Cut Can grab is released and inserted (stage check) | "+canCutGrab); canCutGrab=3; doorUnlocked=true; trace("Door Unlocked = "+doorUnlocked); overlayTint.visible=false; shelfBoxView.gotoAndStop(3); stage.removeEventListener(Event.ENTER_FRAME, canCutHitFuseBoxListener); } } } } |
This script also made it so that if the cut can was to be dragged whilst the fuse box doors were close (on frame 1 of the MC), that the child would be removed before opening the doors. This way, the hittests of the cut can dragged onto the stage (before the door was opened), would not interfere with the acitivated hittest when the doors were opened.
Afterwards, I created the boolean doorUnlocked.
This way I could make it so that the door will unlock as soon as the cut can has been dragged onto the fuse box.
The lights will also turn on when this happens, to do this, the movieclip overTint has been set to false.
I then went to the door camera angle and animated is so that when the doorUnlocked boolean is set to true, the screen turns black and takes you to the completed game label.
Once here, I added a timer.
In a tutorial with Dan, we discussed it would be a bad idea to add a timer which would be visible throughout playing the game as it would make the user play the game differently. By having it so that the time is displayed at the end of the game, it makes the users more relaxed on their first play through as they don't realise it is there and are able to play the game properly.
To create this timer, I used the timer from the "Code Snippits" from the windows toolbar. Here various codes were accessible including a timer. This timer however only worked in seconds.
The code was the following:
| /* Simple Timer Displays a countdown timer in the Output panel until 30 seconds elapse. This code is a good place to start for creating timers for your own purposes. Instructions: 1. To change the number of seconds in the timer, change the value 30 in the first line below to the number of seconds you want. */ var fl_TimerInstance_2:Timer = new Timer(1000, 30); fl_TimerInstance_2.addEventListener(TimerEvent.TIMER, fl_TimerHandler_2); fl_TimerInstance_2.start(); var fl_SecondsElapsed_2:Number = 1; function fl_TimerHandler_2(event:TimerEvent):void { trace("Seconds elapsed: " + fl_SecondsElapsed_2); fl_SecondsElapsed_2++; } |
I read the code and figured out how it worked, I then managed to come up with an idea on how I could involve minutes too. The code changed to the following:
| var fl_TimerInstance:Timer = new Timer(1000, 3000); fl_TimerInstance.addEventListener(TimerEvent.TIMER, fl_TimerHandler); var fl_SecondsElapsed:Number = 1; var fl_MinutesElapsed:Number = 0; function fl_TimerHandler(event:TimerEvent):void { if(fl_SecondsElapsed == 60){ fl_SecondsElapsed = 0; fl_MinutesElapsed++; } trace(+fl_MinutesElapsed + " Minutes and " + fl_SecondsElapsed +" Seconds"); fl_SecondsElapsed++; } |
So when fl_SecondsElapsed == 60, I would reset it to 0 and add 1 to the minutes.
This worked very well and was ideal.
Finally, I then went back to the viewTable and completed the art for that camera angle. Originally I had not done this as I felt that the scripting of the game was more important than the appearance.
Before
After
Once complete, I was very happy with the results.
Friday, 18 April 2014
Working Processes / Planning: Creating the Game - New idea, Google Sketchup, take and move new items.
I have a new idea!
So far I haven't had an idea on how the user will actually escape from the room.
However, I know that cans from vending machines are aluminum, and these are a good conductor of electricity. I can change the picture frame near the shelf, which currently has no use, into a fuse box. Inside the fusebox, two parts will be disconnected and one part would still be connected. The disconnected parts would be for the Door and Lights whilst the still connected part would be there for the rest of the electricity.
There is also nothing on the shelf there, so I could add scissors there which could be used to cut the can.
The first thing I need to do, is to open my Google Sketchup document.
Using the components list from the materials menu I added scissors and placed them on top of the shelf.
I could not find a suitable fuse box. I searched for an alternative name - distribution board and found one which looked nice.
This fuse box had door panels, however they weren't split into different groups, this meant that the doors could not be opened.
I decided to keep the door panels, but delete the box behind. Then group each door panel individually and redraw the box behind. There were now three groups of components to make the fuse box instead of just one. This meant that I could now rotate the doors how I wanted.
I took printscreens of the fuse box with the doors open and closed and imported them into Flash.
I traced around the first image and added the doors to a new layer. In the next frame, I deleted the doors from the layer and drew them again but open. As I did not have any content inside this fuse box, I drew them straight into Flash on a separate layer, with some wires unconnected.
As there was a shelf to the left of the fuse box, it meant that the contents of this camera angle was wider than normal. I could have scaled both of them down, to create a zoomed out effect, but I wanted the contents to be close enough, even if it meant that a door had to be cut off the stage in the process.
I then made it so the scissors could be taken from the shelf and added to the inventory and applied a drag an drop function, which I used with the lightbulb, to both the scissors and the can. I adjusted the code accordingly so it would work with these items too.
So far I haven't had an idea on how the user will actually escape from the room.
However, I know that cans from vending machines are aluminum, and these are a good conductor of electricity. I can change the picture frame near the shelf, which currently has no use, into a fuse box. Inside the fusebox, two parts will be disconnected and one part would still be connected. The disconnected parts would be for the Door and Lights whilst the still connected part would be there for the rest of the electricity.
There is also nothing on the shelf there, so I could add scissors there which could be used to cut the can.
The first thing I need to do, is to open my Google Sketchup document.
Using the components list from the materials menu I added scissors and placed them on top of the shelf.
I could not find a suitable fuse box. I searched for an alternative name - distribution board and found one which looked nice.
This fuse box had door panels, however they weren't split into different groups, this meant that the doors could not be opened.
I decided to keep the door panels, but delete the box behind. Then group each door panel individually and redraw the box behind. There were now three groups of components to make the fuse box instead of just one. This meant that I could now rotate the doors how I wanted.
I took printscreens of the fuse box with the doors open and closed and imported them into Flash.
As there was a shelf to the left of the fuse box, it meant that the contents of this camera angle was wider than normal. I could have scaled both of them down, to create a zoomed out effect, but I wanted the contents to be close enough, even if it meant that a door had to be cut off the stage in the process.
I then made it so the scissors could be taken from the shelf and added to the inventory and applied a drag an drop function, which I used with the lightbulb, to both the scissors and the can. I adjusted the code accordingly so it would work with these items too.
Thursday, 17 April 2014
Working Processes: Creating the Game - Adding to the Vending Machine, sorting password on note
I added more to the vending machine script so that now after the item code had been entered correctly, the vending machine would dispense the Amnezol drug.
The following script was used:
By adding this script and setting a boolean to true, this means that I can add an if statement so that once the boolean is set to true, the drug can would appear.
I created a new frame, and gave it the lable of "viewVendingDispenser". I then drew in the art for the bottom of the vending machine and created the can.
I used the following code for this frame:
I then fix the issue regarding the password, as noted from the user testing, placed on the note.
Before
After
This looked much better and now contained a password which could be used to log into the computer.
The following script was used:
| // ---------Check what to do next--------- receiptBooleanCheck() function receiptBooleanCheck():void { if (! receiptInserted) { vendingFriendlyText.text="PLEASE INSERT RECIEPT"; } else if (receiptInserted && vendingMachine_txt.text!="AC42G") { vendingFriendlyText.text="PLEASE ENTER YOUR CODE"; stage.addEventListener(Event.ENTER_FRAME, vendingTextCountListener); stage.addEventListener(Event.ENTER_FRAME, vendingTextCountReset); } else if (receiptInserted && vendingMachine_txt.text=="AC42G"){ vendingFriendlyText.text="DRUG READY TO COLLECT"; orderedDrug = true; } } |
By adding this script and setting a boolean to true, this means that I can add an if statement so that once the boolean is set to true, the drug can would appear.
I created a new frame, and gave it the lable of "viewVendingDispenser". I then drew in the art for the bottom of the vending machine and created the can.
I used the following code for this frame:
| if (orderedDrug) { vendingDispenserView.itemDrugCan_btn.visible=true; } |
I then fix the issue regarding the password, as noted from the user testing, placed on the note.
Before
This looked much better and now contained a password which could be used to log into the computer.
Working Processes / Planning: Feedback from User Testing [2]
Today, I had the game tested again.
Since I had created more content for the game since the last time, there were now other features to be evaluated.
They were the following:
The reason that each letter issue with the Art has a different importance level is due to the following reasons:
Users are likely to be able to figure out that the 4 is actually a 4 and not an A. Very few users had issues wit the 4 looking like an A and knew the C was placed before it.
The M in the password did look like a W, but still looked more like an M.
The wrong letter was given at the end of the password meaning that it would be nearly impossible to log into the computer. This is extremely important to fix otherwise it would be completable.
It also took the user 12 minutes to complete the uncompleted gam.
Since I had created more content for the game since the last time, there were now other features to be evaluated.
They were the following:
| Feedback | Type | Solve it by | Importance |
| esc go back | Feature | Adding it | Extremely |
| click outside to close | Feature | Adding it | Very |
| 4 looks like A in notebook | Art | Separating the C from the 4 | Moderate |
| M in password looks like W | Art | Breaking the font and adjusting the appearance of the lower case M manually | Very |
| C is R - Wrong Password | Art | Changing the letter to the correct one | Extremely |
| back wasn't clear | Feature | Adding notification to let you know it's there | Moderate |
The reason that each letter issue with the Art has a different importance level is due to the following reasons:
Users are likely to be able to figure out that the 4 is actually a 4 and not an A. Very few users had issues wit the 4 looking like an A and knew the C was placed before it.
The M in the password did look like a W, but still looked more like an M.
The wrong letter was given at the end of the password meaning that it would be nearly impossible to log into the computer. This is extremely important to fix otherwise it would be completable.
It also took the user 12 minutes to complete the uncompleted gam.
Wednesday, 16 April 2014
Working Processes: Creating the Game - Reading the Note, Vending Machine Code and Splice Issues
Today, I made it so that the note [on the table] can be read, if you have the lightbulb inserted and are wearing your glasses (otherwise the text is blurred).
I have also introduced the ability to add the order code, found from the notebook, into the vending machine. Since adding the order code to the vending machine was through buttons on the vending machine, this meant that I would have to convert each button into a movieclip. To avoid doing this I created a invisible symbol and place it on top of each button. This way, I didn't need to create a new symbol for each button. The symbols could be copied and pasted, and thus reused with different instance names.
I created the following code for the buttons.
I scripted this so not only would the user be able to to use each number and letter of the vending machine, but also so that if they had gone over 5 characters, the eventlistener would be removed so they weren't able to continue.
The cancel feature (the red c), was made so that users would be able to delete the characters they typed in if they wanted to start again.
The entering of the buttons were applied to a new frame, so that the user had to zoom into the buttons before proceeding.
There were also issues with the Splice feature which I needed to address.
When testing the game myself, each time I had plugged in the lightbulb and went to view the drawers to collect the key, upon pressing the back button - they key would automatically be removed from my inventory. This created a lot of confusion as I didn't know why this was the case, since to my knowledge, the code was flawless.
What I had not realised is that the splice feature will remove the last item added to the vector if it cannot locate the item referred to in the script.
So since the lightbulb had already been removed [from inserting it into the lamp], when going back to that frame, it removed the key.
The splice feature was only suppose to be active if the lightbulb had an if(hitTestObject) with the lamp.
What had happened was that instead of me scripting it so that it would remove the child, I instead made it invisible - so that it would disppear. Meaning that once the light was inserted, it was still there on top of the lamp. Thus meaning the splice was always active.
To fix this I added a removeChild after the lightbulb had (hitTestObject with the lamp.
I have also introduced the ability to add the order code, found from the notebook, into the vending machine. Since adding the order code to the vending machine was through buttons on the vending machine, this meant that I would have to convert each button into a movieclip. To avoid doing this I created a invisible symbol and place it on top of each button. This way, I didn't need to create a new symbol for each button. The symbols could be copied and pasted, and thus reused with different instance names.
I created the following code for the buttons.
| // ---------Characters on 5 - Remove buttons --------- function vendingTextCountListener(event:Event) { if (vendingMachine_txt.text.length>=5) { trace("No Room Left"); removeVBtnListeners(); receiptBooleanCheck(); stage.removeEventListener(Event.ENTER_FRAME, vendingTextCountListener); } } // ---------Characters on 0 - Add buttons --------- function vendingTextCountReset(event:Event) { if (vendingMachine_txt.text.length==0) { trace("Characters Reset | Room to type"); addVBtnListeners(); stage.removeEventListener(Event.ENTER_FRAME, vendingTextCountReset); } } // ---------Start Again--------- VbtnCANCEL.addEventListener(MouseEvent.CLICK,vBtnCancel); function vBtnCancel(ev:MouseEvent):void { vendingMachine_txt.text=(""); stage.addEventListener(Event.ENTER_FRAME, vendingTextCountReset); stage.addEventListener(Event.ENTER_FRAME, vendingTextCountListener); } // ---------Add / Remove functions--------- function addVBtnListeners():void { VbtnA.addEventListener(MouseEvent.CLICK,vBtnAListener); VbtnB.addEventListener(MouseEvent.CLICK,vBtnBListener); VbtnC.addEventListener(MouseEvent.CLICK,vBtnCListener); VbtnD.addEventListener(MouseEvent.CLICK,vBtnDListener); VbtnE.addEventListener(MouseEvent.CLICK,vBtnEListener); VbtnF.addEventListener(MouseEvent.CLICK,vBtnFListener); VbtnG.addEventListener(MouseEvent.CLICK,vBtnGListener); VbtnH.addEventListener(MouseEvent.CLICK,vBtnHListener); VbtnI.addEventListener(MouseEvent.CLICK,vBtnIListener); Vbtn1.addEventListener(MouseEvent.CLICK,vBtn1Listener); Vbtn2.addEventListener(MouseEvent.CLICK,vBtn2Listener); Vbtn3.addEventListener(MouseEvent.CLICK,vBtn3Listener); Vbtn4.addEventListener(MouseEvent.CLICK,vBtn4Listener); Vbtn5.addEventListener(MouseEvent.CLICK,vBtn5Listener); Vbtn6.addEventListener(MouseEvent.CLICK,vBtn6Listener); Vbtn7.addEventListener(MouseEvent.CLICK,vBtn7Listener); Vbtn8.addEventListener(MouseEvent.CLICK,vBtn8Listener); Vbtn9.addEventListener(MouseEvent.CLICK,vBtn9Listener); Vbtn0.addEventListener(MouseEvent.CLICK,vBtn0Listener); VbtnS.addEventListener(MouseEvent.CLICK,vBtnSListener); } function removeVBtnListeners():void { VbtnA.removeEventListener(MouseEvent.CLICK,vBtnAListener); VbtnB.removeEventListener(MouseEvent.CLICK,vBtnBListener); VbtnC.removeEventListener(MouseEvent.CLICK,vBtnCListener); VbtnD.removeEventListener(MouseEvent.CLICK,vBtnDListener); VbtnE.removeEventListener(MouseEvent.CLICK,vBtnEListener); VbtnF.removeEventListener(MouseEvent.CLICK,vBtnFListener); VbtnG.removeEventListener(MouseEvent.CLICK,vBtnGListener); VbtnH.removeEventListener(MouseEvent.CLICK,vBtnHListener); VbtnI.removeEventListener(MouseEvent.CLICK,vBtnIListener); Vbtn1.removeEventListener(MouseEvent.CLICK,vBtn1Listener); Vbtn2.removeEventListener(MouseEvent.CLICK,vBtn2Listener); Vbtn3.removeEventListener(MouseEvent.CLICK,vBtn3Listener); Vbtn4.removeEventListener(MouseEvent.CLICK,vBtn4Listener); Vbtn5.removeEventListener(MouseEvent.CLICK,vBtn5Listener); Vbtn6.removeEventListener(MouseEvent.CLICK,vBtn6Listener); Vbtn7.removeEventListener(MouseEvent.CLICK,vBtn7Listener); Vbtn8.removeEventListener(MouseEvent.CLICK,vBtn8Listener); Vbtn9.removeEventListener(MouseEvent.CLICK,vBtn9Listener); Vbtn0.removeEventListener(MouseEvent.CLICK,vBtn0Listener); VbtnS.removeEventListener(MouseEvent.CLICK,vBtnSListener); } // ---------The button functions--------- function vBtnAListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"A"); } function vBtnBListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"B"); } function vBtnCListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"C"); } function vBtnDListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"D"); } function vBtnEListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"E"); } function vBtnFListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"F"); } function vBtnGListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"G"); } function vBtnHListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"H"); } function vBtnIListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"I"); } function vBtn1Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"1"); } function vBtn2Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"2"); } function vBtn3Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"3"); } function vBtn4Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"4"); } function vBtn5Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"5"); } function vBtn6Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"6"); } function vBtn7Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"7"); } function vBtn8Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"8"); } function vBtn9Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"9"); } function vBtn0Listener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"0"); } function vBtnSListener(ev:MouseEvent):void { vendingMachine_txt.text=(vendingMachine_txt.text+"*"); } |
I scripted this so not only would the user be able to to use each number and letter of the vending machine, but also so that if they had gone over 5 characters, the eventlistener would be removed so they weren't able to continue.
The cancel feature (the red c), was made so that users would be able to delete the characters they typed in if they wanted to start again.
The entering of the buttons were applied to a new frame, so that the user had to zoom into the buttons before proceeding.
There were also issues with the Splice feature which I needed to address.
When testing the game myself, each time I had plugged in the lightbulb and went to view the drawers to collect the key, upon pressing the back button - they key would automatically be removed from my inventory. This created a lot of confusion as I didn't know why this was the case, since to my knowledge, the code was flawless.
What I had not realised is that the splice feature will remove the last item added to the vector if it cannot locate the item referred to in the script.
So since the lightbulb had already been removed [from inserting it into the lamp], when going back to that frame, it removed the key.
The splice feature was only suppose to be active if the lightbulb had an if(hitTestObject) with the lamp.
What had happened was that instead of me scripting it so that it would remove the child, I instead made it invisible - so that it would disppear. Meaning that once the light was inserted, it was still there on top of the lamp. Thus meaning the splice was always active.
To fix this I added a removeChild after the lightbulb had (hitTestObject with the lamp.
Subscribe to:
Comments (Atom)