The document is a production log for a video game demo level created by Jack Hurst. It summarizes the process of designing the background, streets, buildings, signs, holes, trophies, and character. Key details include experimenting with different background speeds, using guides to ensure consistency, choosing accent colors for each street, adding Japanese signs to indicate the setting is Tokyo, and animating the character walking, jumping, and falling through the levels. The goal was to create a realistic late-night look and setting in Tokyo to match the intended film advertisement concept.

1. Production Log
Jack Hurst

2. 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.

3. Video Game – Demo Level
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.

4. Video Game – Demo Level
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.

5. Video Game – Demo Level
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.

6. Video Game – Demo Level
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.

7. Video Game – Demo Level
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.

8. Video Game – Demo Level
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.

9. Video Game – Demo Level
Here is what the Game Over screen would look like for each street in the developed game.

10. Synopsis

11. Video Game – Menu Screen

12. Video Game – Cut Scene

13. Video Game – Sound Track

14. Advertisement – Magazine Cover

15. Advertisement – Film Posters

16. Advertisement – Bus Postera