8bitinstitute-blog
Games: Behind the Interface
100 posts
Britney Smith IM&G 1B
Don't wanna be here? Send us removal request.
8bitinstitute-blog · 8 years ago
Text
Evaluation
Research:
When researching target audience, I used a range of research methods such as playtests. This research (which can be found on my blog) was key for the development of my product as it gave me a solid outline on how to create a piece of media that my target audience would be interested in. I found that playtests were the best way to get the specific answers I was looking for to know for certain what I would need to change to target my audience more accurately. In addition to this, playtests with physical questionnaires was the perfect way to get both qualitative and quantitative results which makes it simpler to demonstrate my findings whilst also getting accurate criticism.
Comparative products were my main source of inspiration and further idea development. The main research method I used was simply playtesting/watching said comparative product and analysing it in detail. I deemed this method of researching the most suitable as I could analyse the comparative product first hand and get an accurate representation of what I would aspire to create. The afore mentioned research (which can be found on my blog) massively impacted my project in all aspects. With every piece of research, I could add to or develop my idea further and cater more to my target audience.
Overall, all my research impacted the development of my core concept and enabled me to further learn how to take inspiration from popular professionally made products. The research methods I used were efficient and fitting to the research I wanted to gather as well as being easy to analyse and implement into my own work. However, the organisation and detail needed much improvement as I noticed when concluding my work. To do this, I would like to thoroughly plan every piece of research (both primary and secondary) to meet a specific format and set of criteria so that I can get the most out of the research itself without missing any key points. By doing this, I would also solve the issue of having a distinct lack of detail by having a set criteria of which to match my research analysis/explanation up to.
 Pre-production:
For pre-production, I produced character profiles and concepts, storyboards, a target audience profile, a Gantt chart and a Design Document containing all the details of my project concept. Throughout the pre-production stage I was researching into my target audience and overall theme so my ideas were constantly changing. I didn’t really have to make any major changes to my idea during pre-production as my idea was thoroughly thought out prior to even starting research.
Thankfully, during the pre-production stages of my project, I had little to no major issues or aspects I had to change about my core idea. The well-thought-out ideas really helped me during this stage to be certain of what my idea is and that it is exactly what I wanted it to be. Even though pre-production went well, there is always room for improvement. I would’ve preferred more coloured concept art along with a more fleshed out Design Document to make my idea complete in every sense. To achieve this, next time I will prioritise creating my design document and making it both information filled and aesthetically pleasing.
 Production:
For the production segment, I produced my final product, “How to Survive Natural Disasters!” – An Interactive How-to Safety Guide. Coming to the end of production, I had to face the fact that I did not dedicate enough time to creating the final product. So, to deal with this, I decided to cut the final product short and finalise whatever was finished to create the final product. This was a rather large decision to make in such a short amount of time, but in the end, it made for a more polished final product that replicates a “demo” which is commonly used to showcase works in progress.
During the coding section of production, I encountered several different issues regarding buttons and their functionality. I planned on having a button to be clicked by the user that will then change one image into another image in the exact same place. The idea seemed simple at first, but as time went on I kept encountering issues no matter what I tried. After multiple research sessions of learning how to solve the issue, I asked for help from my teacher who is more versed in the software that I am. I worked alongside my teacher (who was explaining what the issue was as we went) to solve the issue. Eventually, I got it working and came out of the experience now knowing how to solve the issue in the future.
The remaining parts of production went smoothly. I followed my Gantt Chart and got everything done in the allotted time other than the programming section. Regarding that, next time I decide to use a program I am not fluent in, I will allow a lot more time for any issues that may occur or new skills I need to develop.
My product is suitably fitting for my target audience. It doesn’t match up exactly due to the product itself being suitable for a large range of people. I originally wanted a product that doesn’t appeal to one specific type of person (male/female, children/adults etc.) so that it allows me to have creative freedom as well as non-stereotyped content. I achieved my goal and my How-to Guide appeals to the set target audience.
The original idea (presented in my pitch and written in my proposal) matches my final product. No changes were made that stray from the original project concept. My main goal throughout the project was to stick as closely as I can to the main idea to simulate what would happen if I was making an interactive product myself outside of college.
 Conclusion:
Overall, I have developed my organisation skills and learnt new ways to structure media development. I have also further improved my skills in Flash to a point where I now feel comfortable trying to figure things out for myself rather than researching for help. Both my favourite and most difficult part of this project has been solving the problems I was having during production (afore mentioned button issue). It was very challenging and really tested my new-found skills and knowledge but also gave me a sense of mass achievement and satisfaction when I finally got it to work. I also very much so enjoyed the planning section of the project. I finally got to spread my wings in terms of what I personally think I’m good at whilst it being beneficial to the course. In the future, I will most definitely use all the skills that I have developed over this project in the future. Mostly, I will use my now heightened organisational skills to help thoroughly plan out future projects and anything else I plan on creating.
0 notes
8bitinstitute-blog · 8 years ago
Text
Bibliography - Survive/Thrive
All of the bold in-text references have been elaborated on here:
DarkSquidge (2017) “Last Week I Beeped Like a Sheep” Youtube. Available from: https://www.youtube.com/watch?v=o-7VlKzhZls&spfreload=5 [Accessed 5 April 2017]
Bethesda Game Studios (2015) Fallout 4 [Computer Game] Bethesda Softworks
CBeebies (2017) Hurry Up [Online]. Available from: http://www.bbc.co.uk/cbeebies/stories/charlie-and-lola-hurry-up?collection=storytime-app-stories
“The Walking Dead” (2016) Last Day on Earth, Season 6, Episode 16, AMC, 3 April.
Department of Homeland Security (2017) Know the Facts [Online]. Available from: https://www.ready.gov/kids/know-the-facts [Accessed 2 May 2017].
Hunt, R. and Brychta, A. (1985) Biff Chip and Kipper, Oxford reading Tree
Social Security (2016) Top Names of the 1950′s [Online]. Available from: https://www.ssa.gov/oact/babynames/decades/names1950s.html
Kevin MacLeoud (2010) Fig Leaf Rag [Online]. Available from: https://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100701
Freesound (2008) Page Turn [Online]. Available from: https://www.freesound.org/people/flag2/sounds/63318/
Freesound (2016) Click [Online]. Available from: https://www.freesound.org/people/soundsofawesome/sounds/349330/
Edutech Wiki (2016) Flash Sound Tutorial [Online]. Available from: http://edutechwiki.unige.ch/en/Flash_sound_tutorial
MondoMedia (2017) “See You Later, Elevator (Ep #68)” [Online]. Available from: https://mondomedia.com/watch/Dpbbbc/See_You_Later_Elevator_Ep_68 [Accessed 4 May 2017]
0 notes
8bitinstitute-blog · 8 years ago
Text
7th June 2017
Tumblr media
- Completed user testing
0 notes
8bitinstitute-blog · 8 years ago
Text
Primary Research - Play test
During my lesson today, I conducted a play test for my primary research. I used the questionnaire below to collect my results.
Tumblr media
When retrieving the responses, I allowed the play testers to tick more than one box if it seems fit. This explains why the numbers “don’t add up” exactly. The adjustments I said I wanted to make will be applied after the deadline as I currently do not have the time available to make the changes.
Tumblr media
1a. The colour scheme fits the theme but is too light and bright. It was also deemed boring and ill-fitting to the theme. To improve my product I will make the colours used more drained/dirty looking in order to fit the theme better. As for making the colours more interesting, I would like to add more colour in the background to prevent having to make changes to the colour palette itself.
1b. The character design was seen as childish (which is what I wanted), clean and well fitting to the set theme. It was also said that the designs could’ve fit the era more, this can be solved by adding old school filters over the pre-existing designs to make them look more worn and of the era. This would sidetrack creating completely new designs without not addressing the comment.
Tumblr media
2a. The music was well balanced in terms of volume, pleasant to listen to and well fitting to the theme. One tester said that the music was too quiet, I won’t be addressing this issue directly as the user can increase their own volume on their device to solve the issue.
2b. The volume was well balanced in terms of sound effects, well fitting to the theme but too boring and lack luster. It was suggested to me in the “Other” section that I add a sound effect to every piece of interactivity. I plan on adding a sound effect when the user clicks on the “be safe” and “be unsafe” buttons to add extra hilarity to the meaning of the click. E.g. *clicks on be safe in earthquakes* Boy says “Yay!”, *clicks on be unsafe in earthquakes* Impaling sound plays.
Tumblr media
3. The interactive aspects of my product were perceived as funny, but inconsistent. The inconsistencies lie within the fact that the product is not yet finished so there is only a short space to actually be consistent. Out of the interactive aspects that are finished, there were no clear inconsistencies, so the only work needed on this is to finish another two pages to show how I desired the product to continue.
In terms of the created questionnaire, I discovered that this formatting got me the exact answers i required to make improvements, but was hard to go into specifics about what people wanted and how people felt. This format also made it hard to create a visual representation of the data (charts and graphs). In the future, I would like to incorporate this questionnaire style with the one I used last topic in order to get both Qualitative and Quantitative data.
0 notes
8bitinstitute-blog · 8 years ago
Text
Happy Tree Friends
The well-known web series Happy Tree Friends (2017, MondoMedia) is a fun, bright and child-like show that explored the gorier side of cartoon entertainment.
Almost every episode starts off with a very innocent plot line that relates to a children’s show. As the show progresses, it strays from the kid-friendly content to follow a path of blood sweat and tears.
Tumblr media Tumblr media Tumblr media Tumblr media
This directly inspires my project due to the very childish animation and design, as well as the intense gore. After researching this, I have decided to make my project with gore that includes specific body parts in order to make the gore much more intense and realistic. This will also add to the comedy of the product since blunt and shocking changes (going from happy to sad really quickly) make people laugh.
2 notes · View notes
8bitinstitute-blog · 8 years ago
Text
Adding sound in the background
Opened Flash Project
Imported background audio file to library
Tumblr media
Created a new layer in the timeline
Tumblr media
Dragged the audio file into the new layer
Tumblr media
When initially doing this, I wanted the track to loop once it finished playing all the way through. However, when I selected the “loop” option in Flash, it just looped every time I went to the first page (first frame in any layer). I solved the issue by simply selecting “repeat” rather than “loop”.
Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
Creating functional buttons
Opened buttons layer and converted arrows to buttons.
Tumblr media
Selected left arrow and opened actions panel and used code snippets to add code to the button.
Added stop command.
Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
Importing and placing images to pages 4 and 5
Imported page 4 and 5 images to library
Dragged onto the stage (in the “content” layer) and used the “free transform” tool to make the images the desired size.
Tumblr media Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
Adding sound to the page turn arrows
I have indeed done this before, but it was a long time ago, so I used Flash Sound Tutorial (Edutech Wiki, 2016) to refresh my knowledge.
Imported the page turning sound into library
Double clicked one of the buttons to bring up the button’s timeline
Tumblr media
Inserted a key frame where the title says “Down”
Dragged sound onto stage
Tumblr media
To test that my button worked, I tested the movie.
Tumblr media
Unfortunately, the previously implemented background music is too loud so i couldn’t tell if my button was working or not. I am going to figure out a way to make the background music quieter and the button sound clip louder.
I have now solved this issue by doing the following:
Clicked on the first key frame in the background music layer and opened the sound envelope editor.
Tumblr media
Clicked on the waveform and dragged the newly created white box down to lower the volume.
Tumblr media
Tested again to be sure I got the volume levels I wanted and all was good! After solving this issue, I now know how to solve it if the issue occurs again and I can now hear both audio tracks perfectly.
0 notes
8bitinstitute-blog · 8 years ago
Text
Adding text to each page
Adding text is simple so I simply created a text box in the layer “content” and typed what i wanted it to say, changed the font and size and moved it to where i wanted it to be.
Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
Creating the project and importing background images
Opened Flash in Action Script 3.0.
Height: 1024px Width: 768px
Tumblr media
Imported book cover template, book opened template, background and arrow.
Created background, content and button layers.
Tumblr media
Dragged imported images into the relevant layer and adjusted position and scale.
Created new key frame in background layer for the front cover and the opened book image.
Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
10th May 2017
Tumblr media
Evidence
Design Document:
https://8bitinstitute.tumblr.com/post/160508952079/design-document
0 notes
8bitinstitute-blog · 8 years ago
Text
Sound Effects
As for sound effects, I will only be including a few sounds to add to user immersion. When clicking the arrow to turn the page, a page turning sound will play and when clicking the children to trigger an image change, a mouse clicking sound will play to exaggerate the fact that the user has doomed the children to die/be safe.
Once again, I will be using royalty free sound effects as they aren't my main priority. I shall be using two sound clips; Page Turn (Freesound, 2008) and Click (Freesound, 2016).
0 notes
8bitinstitute-blog · 8 years ago
Text
Music
My product is very user experience based and doesn’t include a lot of audio, but nonetheless there will be a few pieces of audio to complete the project and bring everything full circle.
Due to the style of my product I will add quiet 1950’s style jazz/swing to go in the background. It will be quiet and purely instrumental so that the music doesn’t take away from the main piece of work and its dark contents. Due to the large amount of art required for this project I will be using royalty free music to cut down overall production time down and increase the overall quality.
I shall be using Kevin MacLeoud’s Fig Leaf Rag (Kevin MacLeoud, 2010) as it was the best quality, old timey music that wasn’t too dramatic. I also chose this as it didn’t have any music or distracting lead instrument to distract the user form the primary task.
0 notes
8bitinstitute-blog · 8 years ago
Text
Character’s Names
My two main characters are made in the style of 1950′s children, in cartoon form. To add to the authenticity, i have looked into both boys and girls names that were popular during the decade. I used the webpage Top Names of the 1950′s (Social Security, 2016). I found that this was the most reliable webpage to get my information from as it is a government run website and most likely has the most accurate information.
Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
Design Document
For my project, it seemed appropriate to create a document containing all of the ideas that come together to make my product. A GDD wasn’t entirely relevant to the format of my project so I decided to take sections from my past GDD’s and make my own Design Document for my project.
Tumblr media Tumblr media Tumblr media Tumblr media
0 notes
8bitinstitute-blog · 8 years ago
Text
9th May 2017
PROGRESSION TABLE EDIT
(Added “Audio” and “Theme” in the row labelled “Design Document”)
Tumblr media
Evidence
Design Document:
Title Page
Characters
Interactivity
Summary
Target Audience
Audio
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
0 notes