Production Log

Video Game – Demo Level
To start with I have experimented with
different numbers of frames for the
background to be able to get the
correct speed for running. This helped
me to decide how long my background
needs to be for my demo level.
I have used the gradient tool to create
an ombre designs with different
colours. I thought the purple and
orange looked good as it looks like a
low sunset. I also tried the blue fading
into the white which looks like the sky
just before sunset on a darker night. I
decided to choose the blue background
as it is a more neutral colour compared
to orange and I am using orange for the
neon lights in the first street.
A problem I found with the gradient
tool was that it covered my rectangle
on a different layer, so I had to go to
effects and colour overlay to bring back
the grey I chose to create the road.
Here is the layer with the colour overlay setting.
In the orange background you can see the
rectangle is orange whereas in the blue
background, you can see the rectangle is grey.
Here is a section of my design as I
haven’t done much yet. I have started
to use guides to help create a finished
look with the floors being at the same
height and the doors and handles all
being at the same height.
Above I have shown the 3 streets I have created for my demo level. I decided to make
the streets longer so the 2nd street 200 pixels longer than the 1st street, so the
trophies are further apart meaning the player won’t get the bonus points as easily.
I have created the first street to be more of a shopping street with more buildings as
shops and with larger windows, I have created the second street to be more
residential with more taller buildings for flats and I have created the third street to be
more industry based with offices and cafes. I think this works well as it meant each
street is more individual but keeps the same style as the others, meaning you can tell
you are in the same city. I could have added more taller buildings as Tokyo has a high
population density so there are lots of skyscrapers but if I made the game, I would add
a street full of skyscrapers to show the demand for housing.
As you can see, I have used guides to help me as I waned to keep the scale through
the whole game. I used a guide to keep the ground, first and second floor at the same
level. I used a guide to keep the door and door handles at the same height to create a
more finished look. This helped me as it would have ended up looking messy and it is
hard to use the rulers at the side to get the correct pixels.

First, I decide to change the background to be darker than before to create a late-night look. Straight away I
knew this looked better than the brighter blue, however the buildings didn’t go with the background. To fix
this I used the bucket tool to change the colour of each street to be darker shades, so they didn’t standout
as much. I also decided to darken the ground to go with the theme which looked better as it isn’t the main subject I wanted the viewer to focus on
when they saw the game. For the first street, I didn’t have to change the colours as the were quite dark, but I did have to think about the ground, so
the buildings didn’t blend in. To help with this I made the top layer black to separate the 3 greys. For the second street I changed the buildings to
darker shades of the first colours to keep the contrast the same which meant the buildings didn’t pop out as much as they did. For the third street, I
changed the buildings to dark reds as the black and grey didn’t contrast enough from the ground. I decided to go for red because I had seen lots of red
when looking at Tokyo for inspiration. Overall, I am happier with this background and colour scheme as the it creates a late-night look and the colours
are toned down compared to my first choice. This design will support my film and advertisement as I wanted the late-night look.
To the left I have shown the stars I have added to
the sky. First, I tried more stars and then I tried less
stars to compare which looks best with my design. I
like the fewer stars rather than the more stars as it
creates a more minimal look which is what I went for when designing the streets. I also think that having the less stars helps the player focus on
jumping rather than being distracted by other subjects in the background. I will be using the fewer stars in the background to go with my minimal look
throughout the game design.

Above, I have shown how I have chosen the colours for each street when adding the signs. For the 1st street I wanted red and orange, as it was my original
pairing when thinking out the advertisement of the film idea. For the 2nd and 3rd street I wasn’t sure what would work the best, so I tried pink and purple on
the 2nd street with blue and green on the 3rd street. To compare my options, I then swapped them around so blue and green are on the 2nd street with pink
and purple on the 3rd street. After doing this I then decided that the blue and green looked better on the 2nd street as the marron buildings will fit in with the
pink and purple analogous colour scheme. This has worked out well as they are all analogous colour schemes, making the background more aesthetic.
Using Adobe Colour helped me to create colour schemes that fit with each section of my design, as it is an easy use website.
Here are my colour schemes for each street:
Above I have shown the process of creating the signs to add the accent colours. I started of by creating the outlines for the signs on top of many buildings, as
in Tokyo the signs stick out from the shop which I couldn’t do in 2D. I then used the bucket tool to fill the signs in with 6 colours depending on the street.
With the pairing of colours, I alternated between them to separate the buildings easier which made the background easier to look at when playing the game.
I then added Japanese writing to the signs to show that the game is set in Tokyo as the neon signs with Japanese writing is all over Tokyo’s streets. Adding
the signs made was the aspect that change the whole look as before it looked like any street which isn’t what I wanted for my design, I wanted the player to
know that they are in Tokyo, running through the streets, late at night.

I have added a new layer to create holes in the ground for the
character to jump over. I have used a rectangle to create a 20x10
pixel box and then used the gradient overlay to add a gradient. I
have done this to create a more realistic looking hole in the
ground as I first tried a solid black rectangle which didn’t look
realistic. Using the gradient has worked better as there would be light hitting the top part of the
hole which slowly looses light the further down you go. I made the gaps similar between 2 holes
but shorten the gap for each level to make the game harder and harder every street.
Above is the process on how I created the trophies for the
end of each street. I found a pixel art trophy to give me a
guide then created my own and thought it could be too big,
so I created a smaller trophy but I didn’t have the same
effect as the larger trophy. Once I decided on the larger
trophy, I chosen between a darker or lighter grey and went
with the lighter grey as it looks more like silver. To make
each trophy individual, I added 2 stripes which are the
accent colours for the street they have just completed. I
created the trophy to be with the background but thought
that I wouldn’t be able to make the trophy disappear to
show the character has collected the trophy. To solve this
problem, I will create the trophy when animating my
character so I can create a little sequence for collecting it
When I had drawn the legs and arms for all the stages, I
needed to add the trail as it is the main aspect linking my
products together. I wasn’t sure what colour to choose so I
tried Neon Blue, Light Blue and Neon Green to compare to
the background and I chose the Neon Blue. To help me keep
the trail the same length, I used guides to draw in between.
After moving my background to a 80x120 pixel
document, I used the tween tool to add 300 frames
between the start and the end of the background.
Once I had enough frames to create a realistic
speed for the background, I began to design my
character with the walking, jumping and falling
processes to go with the game. When designing my character I thought about the scale compared
to the buildings and decided to make the character 16 pixels high, 6 pixels for the legs, 6 pixels for
the torso and 2 for the head. I also decided to go with black clothing as the characters in the
advertisements are wearing black clothing as well. I also made the left arm and leg lighter than the
black so the character can be made to look more realistic as you can tell what each limb is doing.
To create the walking, jumping and falling process, I had to create a separate layer for each
movement. To make this easier I add a body layer so the character stayed in the same place for the
whole game and I could turn on the layer for the arms and legs. Doing this took lots of thinking as I
had to think about how the character will land and carry on running, how the character will move in
the air and how the character will move when falling into the hole. Once I got this, I knew my game
looks realistic due to the scale and speed.

To make the character look more
realistic every time they jumped, I
used guides to make sure that the
character stayed in the same place
on the screen and jumped the
Once the character was drawn to how I wanted it, I began to select
the layers for each frame so the character looked like it was walking
and jumping. For my first attempt, I tried 8 walking layers but when
I created the sequence, it looked like the character was walking not
running so I halved the movements to speed up the process. Doing
this meant that my final product will look more realistic as it is a
endless running game. After changing the processes, I had 4 layers
for walking, 5 layers for jumping and 11 layers for falling as every
frame at the end need a new layer. With these layers I could make
my character run and jump through the first and second street and
then fall down in the third street. To make the jumping process
more realistic, I moved the character up 2 pixels for 2 frames then
down 2 pixels for another 2 frames to add the leap effect which
created the realistic jump. After the character has landed, I used
the third walking movement to begin running as it is the closest to
how the character looks when landing.
For the final process of the game is when the
character falls into the hole. After fixing the problem
with the hole and the building, I was able to create
the falling sequence. Above is the sequence where I
used one layer for each frame and changed the legs,
arms and trails. To make the game flow better when
the character dies, I had to work out how far the
background moves from one frame to another so for
the last 6 frames I moved the background to fit with
the rest of the animation as this section was done
after tweening and making the sequences.
As I got to the final stage of the game, I realised that the last hole was too far to the right of the screen for
the character to fall down so I removed the hole from the hole layer. Then using the eyedrop tool, I
recreated the gradient rectangle on the background layer so it follows with the buildings. Once The hole
was moved and the character had fallen down, I realised that the game doesn't flow because the
background stops. To fix this, I extended the building so the background moves when the character falls
making the game flow better before the game over screen appears.
same height in each jumping movement to create a realistic jump. Using the
guides helped me to make sure the character didn’t have any sudden
movements across the screen when the animation is playing which ensure my
product will be at a higher standard.

To add some extra animation to the game, I added a countdown to the beginning of the game. I did this by add 4 more layers and hiding them on all the
other frames so they didn’t appear when they shouldn’t. To make the countdown more visible, I changed the first 4 frames to 0.5 seconds so the player
has more time to react. To keep the symbol in the centre of the screen, I used guides which also helped me to keep the size of them the same. This is a
simple but effective addition to my game.
At the end of each street I have added a trophy with the accent colours across the front. First I drew a trophy inspired by the trophies I found/designed
earlier. I then duplicated the layer to have the other trophy at the end of the other street. For the first trophy, I added red and orange to the front and
for the second trophy I added blue and green to the front. Once both trophies were drawn, I placed them at the end of their street and made sure they
stayed in the same place as the background moved. I couldn’t add them to the background as I wanted them to disappear when collected. When the
character runs past the trophy, the trophy disappears and then I have created 2 more layers for each street so there is a flash of the colours around
where the trophy was. I have alternated the colours to create the flashing look and made sure they stay in the same place as the character carries on
running. When the trophy is collected, the player gets an extra 100 points which I created ‘+100’ to appear on screen which it stays in the same place
on the screen so the player can read that they have 100 extra points. All of these steps are shown above. Doing these animations have brought the
whole game together as everything works as one product.

The final piece of the demo level was the game over screen when the player falls into a hole. To design my screen, I need inspiration which I found as
shown above. This helped me to create a plan for my game over screen as I have used ‘GAME OVER’, the score and ‘Play Again?’ ‘Yes’ ‘No’. Once I have got
my ideas, I set up 4 guides to create a rectangle in the centre of the page. I decided to use pink as the main colour for the screen as the player died on the
pink/purple level but I have shown later that if the game was developed, all the colours could be used. For my first attempt, I used the neon pink as the
boarder and then filled the rectangle in but the pale pink was a solid colour and I needed it to be a tint. To fix this I researched on how to make the colour
more transparent to create a tint look. As shown above, I found the correct menu. To get to this menu you double click on the layer you want to edit, then
you change the opacity on the Blending Option tab (I went to 40%) to create the tint look. I am very happy with this design as the design is inspired by
Jumanji and I feel that I have it fits with the neon, retro theme in my project.
Shown above is the development and detail of the Game Over screen as I have adapted it to fit everything on. Before I started, I create sperate
layers for each word so I could move them easier as shown to the left. To start with I drew ‘GAME OVER’ with the letters 10 pixels tall, 6 pixels
wide and 1 pixel apart. I thought that Game and Over were to close so I moved them apart by 6 pixels. This meant I had to expand the rectangle
which was 60x40 pixels (the rectangle ended up being 70x50 pixels). The next thing I looked at was which ‘V’ to use as I didn’t think the first ‘V’
looked right. I decided to go for the second ‘V’ which made the writing look cleaner. After this, I added the score and ‘Play Again?’ to the screen
which both fit in the rectangle, but I needed to add ‘Yes’ and ‘No’ which meant I had to make the rectangle taller and recentre it before carrying
on. For my final details, I added lines under ‘Yes’ and ‘No’ and I added the animation for the final score as there are points rewarded for
collecting trophies. I decided to use black as the internal colour as it means that if the game was developed, the Game Over screen could be any
of the accent colours.

Here is what the Game Over screen would look like for each street in the developed game.

Once I had the colours and opacity right, I needed to
decide if to have the coloured letters in a straight line or in
a diagonal line as show above. I chose the diagonal line as
it created depth to the title and exaggerated the colour
effect even more. For the letter ‘N’ I had two options for
when drawing and decided to go for the 2nd option as it
looked more realistic compared to the first. Then when I
was drawing the ‘O’ I decided that all the letters would be
2 pixels wide otherwise the height to thickness ratio would
be off making the title look weird.
Video Game – Menu Screen
The name of the film is ‘Become The Player’. The main game in the film which is the game I created, is called ‘Neon Dash’.
To start the menu screen design process, I found different fonts that can be used for pixel art and what each letter looks like. I then found an example of
the style I wanted to use for my main heading as I had seen it before on social media. After I had my ideas together, I created a trial for the colour scheme I
wanted to use. First I went for the colours of the 3 trails in my film idea, I also tried the primary colours but straight away knew they didn’t look right as
they didn’t link to my other products. I knew I wanted a black background as I had seen one when researching Pac-Man as it is a simple background that
can have any accent colours on top which would be useful if my game got developed further. Next I started to create the ‘N’ where I made the blue ‘N’ and
then duplicated the layer 2 times and using the bucket took changed them to teal and green. I then moved the teal and green ‘N’ to create the effect. I
then decided I wanted the letters to be slightly transparent so I changed the opacity to 60% and 80% to compare the two. I thought that the 60% wasn’t
bright enough so I went for the 80% as you could see it was slightly transparent but bright enough at the same time.
To the left I have shown all the layers for the Title. I have had to create 3
layers per letter as I have use 3 colours so they can be moved individually. To
make this process easier, I duplicated the blue letter instead of drawing them
out one by one. Doing this meant I could change the colour and move them
around easily. The only thing that took a while was changing the opacity on
all the layers as it is repetitive. Once all the letter would correct, I merged the
12 layers for ‘Neon’ and then merged the 12 layers for ‘Dash’. This meant I
could move the whole word and move them further away from each other.
In picture 1 you can see the words are close together so as shown in picture
2 I have moved them to be 6 pixels apart.
1 2

Video Game – Menu Screen
I wanted to add my characters to the side of the headings so I needed to change the colour of the background as the character is mainly black. To get this blue, I used
the eyedrop tool to find the darkest blue in the sky from the demo level. To get the same character from the demo level I copied the 4 walking layers from my demo
level animation and used them in my menu screen. Above I have shown that each walking layer has been duplicated twice so there is a layer for a blue, teal and
green trail. Once I had the 12 layers, I arranged the 3 on screen at once to be in a line so they all run together. I decided to make the characters in a vertical line as it
is one of my ideas for a film poster which would make my products link better. I have then shown that I copied the 12 layers so they can be used for the other side of
the menu screen. As you can see above, I decided to rotate the left characters so they are running the other way as it creates a more symmetrical look compared to
my first option. I found 2 ways to rotate the layers. The 1st way is to go to edit – transform – flip horizontal and the 2nd way is to select the layer – use
control/command T – right click – flip horizontal. To create the animation, I selected the 6 layers I wanted in each frame and made the frame 0.1 seconds to make the
character look like they are running – same as the game. I am very happy with my menu screen as it links to the demo level and will link to some of the print I create
later. I also really like the minimal style that is used in the demo level too.
The next stage of my menu screen was the subheadings to move between screens. I started with creating 4 new
layers for the four sub headings. I experimented with having the sub headings by making them 8x5 pixels high and
then 9x5 pixels high as I didn’t know what would look best. I chose to make them 8 pixels high as it gave more
space and looked less cramp. Using 8 pixels also looked better with the height to width ratio. Once I knew the
height, I needed to decide on a font as shown above. I decided to go for the right font as it complimented the title
better with the curved edges rather than the harsh edges on the other font. I also decided to use ‘Objective’ rather
than ‘Aim of Game’ as I wanted to keep the subheadings to 1 word. I then centralised the subheadings.

Video Game – Cut Scene
Overall, I am happy with how the sections of the cut scene have turned out. I am very pleased at how all the pieces link together and that I have create
simpler designs so the production hasn’t been too complicated for me. The next stage is to save them and the edit them together in Premiere Pro.
The only next thing in my script is saying for the paly section is “Have fun and
good luck!” so I didn’t need to create any new animation for it. I decided to
paste my demo level background and then move it 6 pixels a frame so that it
ends up as the starting frame of the demo level.
When designing my cut scene, I wanted to use the menu screen as the
‘base’ of the cut scene. The first step for my cut scene was deciding what
colour to use for selecting a subheading, I chose bright blue as it contrasts
from the background and stays with the colour scheme. To create the
effect of selecting a subheading, I had to make a new layer to put on top of
the white layer. When the player presses play, a page comes up to see if
they have played before. If they select no then the cut scene will be played
so for this product, the player will select no.
The first subheading is ‘Objective’ as I wanted to go
up the headings. The rest of the page will disappear
and then ‘Objective’ will move to the top of the
page as the title for that section. To move
the new layer ‘Objective’ up I added a few new frames moving it up on all of them. I
then moved to a new document so there are less layers to get mixed with and
added the background of my demo level with a dark blue rectangle on top. I wanted
to do this to have just the ground showing to make the animations simple in the cut
scene. To get the background, I merged all the layers from the demo level and
selected it to copy into this document. I then moved the background 6 pixels a
frame to create the same speed. In my script, I talked about jumping, collecting
trophies, falling and game over which are the section I show in this animation. To
create these I copied the layers from my demo level and the selected them for
certain frames. One thing I had to remake was the game over page as I wanted blue
so it goes with the colour scheme for the menu screen and the cut scene.
The second heading is
‘Control’ which is shown
to be selected and move
to the top of a new page.
The next step was to show how to make the character jump and to collect
trophies as they are talked about in my script. First I got inspiration for my
space bar design and then recreated my own as shown above. I then
added the jumping sequence to the new document for the control
section and selected the space bar design to appear before the character
jumps. I then showed that the character will automatically collect the
trophy as told in my script, by using the sequence from my demo level.
The third heading is ‘Play’
which is shown to be selected
and move to the top.

Video Game – Cut Scene
To export the animations for editing in Premiere Pro you need to change the image size. To do this go to image – image size – change the demotions to
1080x720 pixels, change the resolution to 25 pixels per inch and select nearest neighbour. Next go to file – export – render video – make sure the format is
H.264 and the frame rate is 25. Once all these settings are correct, press render and it will be saved into the selected folder. Doing this process means that
all my videos will be the same speed ratio compared to the Photoshop file, same quality and same format
The next step for my video game sequence was to edit the video together. First I created the Premiere Pro file and added the exported videos. I then
edited the menu screen video down to the first section and added that to the tracks. I had realised that the exported videos are quicker then the actual
animations so I timed each section on Photoshop and then changed the speed/duration in Premiere Pro to match. I did this for every section I added to
the tracks, you can see in the 5th picture that the videos have become longer than the ones in the 4th video as it makes the running sequence more
realistic. I changed each section as it meant I could adapt to how long the script will be so I can link the video to the script. Using Premiere Pro made this
process very easy as the steps need were simple and I could change the speed on all of them. It also meant I could make lots is smaller animations in
Photoshop, helping me not get mixed up on all the layers.
Before I move on to adding sound, I wanted to
export my video game sequence to make sure it
runs smoothly so I went to file – export – media
and changed the settings to format – H.264 and
preset – YouTube 1080p Full HD. Doing this means
I can see how the animation looks on a full screen
rather than having it surrounded by all the menus.
reached my final sequence as I have added the
new sections and made sure all the sections were
long enough. Tis sequence is 15 seconds quicker
than my first attempt. Next I need to add the
narrator, soundtrack and sound effects.
I have edited the
video game sequence
some more and

Video Game – Sound Track
I have added the narrator by using Google
Translate. I have copied my script into
Google Translate and then recorded on
Snapchat when I pressed the speech
button. Doing this meant I could record
individual section of my script to move it
around to fit with the correct section. I
was also able to add a voice effect on
Snapchat, I chose a robot effect as it goes
with the retro pixel art game. I then
transferred the files from my phone to
Premiere Pro and cut them to the correct
section. I then thought the audio was too
quiet so I right clicked on the files and
went to Audio Gain – Set gain to and
changed that to 15 dB as the files were
very quiet.

Video Game – What I Have Changed
For the cut scene, I have tripled the amount of frames in
the animation for the sections where a subheading is
selected. I did this as before the player couldn’t read them
in time. I had to add more frames instead of changing the
speed/duration as the running animation is effected.
I have added 2 power ups to the game, a power up that makes you faster and a power up that teleports you 3 holes ahead. I have started by designing the power ups
with a simple symbol that I wanted to keep simple. I then added that to my demo level and moved it 6 pixels each frame to stick with the background. When the
character gets to the symbol, I made another layer to create the activated symbol to show the player has gained a power up. I have then created another layer for the
body when the character gets the power up. To create the effect of the character speeding up, I have edited the speed/duration in Premiere Pro making it 3 times faster.
When the character gets to the second street, I have added the teleport power up. I have done the same for this power up by adding the symbol to move with the
background, added another layer for the activated symbol and then used the activated body layer again. Doing all of this helps to break the repetitive running and
jumping. It also reduces the game by 15 seconds. I didn’t have any new problems with this process as I know what happens when you add layers and export the files etc.

Advertisement – Magazine Cover

Advertisement – Film Posters

Production Log

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Production Log

Similar to Production Log (20)

More from jackhurst8

More from jackhurst8 (20)

Recently uploaded

Recently uploaded (20)

Production Log