2. Process
After setting up my 120x80 pixel document in Photoshop Elements, I began to work on the background for my
game, Monkey Around.
I wanted to create some trees in the distance as a backdrop. First, using the pencil tool set to 1x1 pixel, I drew a line
where I thought the floor should be and used the bucket tool to fill in the rest. Then I began drawing the trees by
hand. I actually only drew one tree, then I realised It would save me a lot of time, if I copied that tree and pasted it
several times. This created multiple layers of single trees, which I moved into position and then using merge down, I
merged them into the original layer.
I then began giving each tree a different detail, so that they didn’t all look the same.
I feel I have made a great start to my project as the background is the part that I have felt most worried about
creating.
3. Process
When planning my game, I had decided that it would be a side scrolling game. Now this isn’t something I’ve done
before, so I had to take a guess at how to go about making a background that would scroll. I had thought about
creating multiple backgrounds in separate layers, but then I realised that by copying the original background that I
had created, I could paste it into a new layer, move the original background along so that it moved outside of the
visible document and then position and merge the two layers together to create one long background of trees. Next I
simply had to blend the two backgrounds together by filling in the gaps with green and drawing the parts of trees that
were missing.
I had also begun working on giving the trees depth, by creating some thinner trees behind in a darker shade and the
trees nearest the front in a lighter shade. I did this by drawing each tree with the pencil tool in 1x1px. It is very time
consuming drawing in pixels and I often made mistakes because my hands aren’t very steady, but to correct the
mistake, I simply used the undo and step backward tools and carried on. This was something I planned in my
contingency planning, which I found very useful.
4. Process
1
2
3
For my scenery I planned to have the trees as a
backdrop, but create different trees and scenery
in the foreground that stood out more. After
looking at my original background(1) I realised it
might look a bit too bright and stand out too
much. So duplicated the layer and tried using
slightly darker colours(2). Again I felt this would
still stand out too much, with the outlines of the
trees making the backdrop look too busy, so for
my final attempt (3) I coloured the outlines the
same as the trees, in order to make them solid
and look less busy. I feel that (3) will blend in
much better with the rest of the scenery when I
create it.
5. Process
For my final work on the backdrop, I created a line of grass using a 1x1px tool set
to green. I wanted to break up the trees from the floor and I feel this was a very
simple but effective way to achieve this.
I then drew a texture on the flooring, as I felt it looked too plain and boring. I
moved the layer along so that I could draw it across the whole of the layer. Now
that this was complete, I can now work on adding in scenery and creating my
characters.
6. Process
For my first it of scenery I wanted to add
in a coconut tree, so I sourced an image
from google images to use as a template.
Although, I’d managed to draw my back
drop by hand, I wasn’t confident about
drawing this tree free hand.
The image was significantly bigger in
resolution to my original document, so
before adding it in to my game document,
I added it to a new document, scaled it
down to 100x100px. I then dragged it into
a new layer on my game document and
this created a pixelated template to work
with.
Before confirming the placement, I
resized it using the markers at the edge
until it was the right scale for my game. I
now felt confident that I had a template
that I could work with.
7. Process
1
2 3
Continuing work on the coconut tree, I picked out colours from the tree using
the colour picker tool. (1) I then began colouring over the pixelated image,
using a 1x1px pencil tool.
When the final image(2) was complete, I wasn’t sure if stood out enough from
the back drop, so I experimented with an outline around the tree. Because the
backdrop was brown, I didn’t think using a darker shade of the tree trunk and
leaves would work, so I tried a black outline(3). Although it does stand out, I’m
not sure whether it makes it look out of place, like it stands out too much, so I
may simply go with the original solid colour version(2)
Finally, I added in some coconuts to the tree. I had originally planned for the
enemies to be throwing coconuts, hence why I wanted to add coconuts trees
into my scenery, to add some relevance to my ideas. As I was drawing the
coconuts, I realised by creating a loose coconut in a separate layer, I could use
this as another for of danger for the main character to avoid, as it could be
then used as a falling coconut from a tree that the character has to get passed.
4
8. Process
I began working on drawing my monkey using a 1x1px pencil. I tried drawing a smaller
monkey first, in more of a side facing pose, but I felt this monkey blended too much with
the background.
I couldn’t draw an outline around the monkey as it was too small, so I drew a bigger
version, and used a black outline. Although this worked to make the monkey stand out, I
felt it looked too dark so I then drew over the outline using a darker shade of brown. I felt
this worked really well and gave the monkey enough definition to stand out.
9. Process
After defining the outline of the monkey, I worked on the monkey poses and created two.
One where the monkey was almost in a sat position and another where the monkey was
moving forward. This would give me two poses that I could switch between in order to
animate my monkey, when it comes to creating the timeline.
I then drew a t-shirt on the monkey. When I was researching similar games, I noticed that
every main character has something iconic about them to make them stand out and be
remembered. I felt this was definitely something I needed to do. My game is aimed
primarily at males, so I gave him a blue t-shirt. In order to aim this game at my secondary
gender, females, I would give the monkey a pink or purple t-shirt as those are both more
feminine colours.
10. Process
After creating my main character, Marvin
the monkey, I decided that my trees stood
out too much with a black outline, so in
order to make them suit the game, I chose
colours that were a darker shade of the
trunk, leaves and coconuts and altered the
outlines so that they blended better.
I did this by using the eye-dropper tool,
selecting the colour I wanted to darken
and by using the colour wheel, I moved
the marker so that it showed a darker
shade and then chose that colour.
I then drew over the outline using a 1x1px
pencil.
11. Process
I needed more scenery for my foreground, so I decided to try making some single coconut trees. I created
two; one angled left and one angled right. I did this by selecting the double tree layer, using the selection
tool to draw a box highlighting one of the two trees. I then copied the highlighted area and pasted it into
a new layer, and removed any parts of the other tree that had been copied and finished off the leaves.
After creating both angled trees, I was about to move onto creating my game text at the top of the
screen when I realised that I had drawn the trees too big and that I hadn’t left any room.
I then had to chop the trees down at the bottom by using the eraser tool and then erased and redrew the
leaves at the top of the trees that were sticking up too much. This gave me plenty of space to create my
game text at the top of the screen.
12. Process
Now that my trees were shortened, I began drawing
my life text and heart counters. I drew these by hand
using a 1x1px pencil tool. I decided to reuse the
colour of the monkeys t-shirt for the frame around
the text to tie it in.
After I’d created the life assets, I began working on
my star counter. In my research and planning, I had
decided a star would be a fun item to collect, but
when it came to drawing it, I soon realised that I
couldn’t draw one in such a small amount of pixels.
This led me to have to reconsider my idea and
instead I changed the star to a coin, for the player to
collect. This was much simpler and easy to draw and
I felt much happier with the result.
13. Process
Now that I had the majority of my assets drawn, I began animating the images. I did this by opening the timeline
window, I then clicked duplicate selected frames which created a duplicate of all my layers in frame 1. In order to make
the monkey look like he was moving in frame 2, I made both monkey pose layers visible, repositioned the moving pose
and then hid the monkey sat pose by unchecking the layer visibility.
I added three stages of the coin rotating; a full coin, a mid turn and a side version. I cycled through to the next version
by changing the visibility of the layers, with each frame, so that it gave the impression that coin was spinning. I did this
so that the coin would stand out and draw the players attention.
I also moved the loose coconut down two pixels in each frame, to create a danger for the monkey to avoid. When it
hits the ground or the monkey, I changed the opacity to 75% and then to 50% and then changed the visibility to show it
was no longer there. I felt this would add an element of thrill and danger, but not too much to be classed as unsuitable
for my primary age range of 4-15years.
1 2 3
14. Process
In order to draw the gorilla enemy, I first duplicated the layer of the monkey stood up and then after
choosing 3 shades of grey to work with, I used the pencil tool to draw over the monkey. I tried to
alter the shape but I couldn’t quite get the gorilla to look how I wanted and realised that he needed
to be much bigger than the original monkey.
I referenced pictures online of cartoon and pixelated gorillas to get an idea of how to draw his body
to make it look accurate and then created three poses so that I could animate the gorillas walk.
Despite the fact it took me a long time to create and get right, I think the gorilla is my best drawing in
this project and I’m especially proud of how the movement turned out.
15. Process
Now that all of the animation is complete, I opened up Premiere Pro and dragged my video
to the timeline to insert it.
I then added in my music track following the same drag and drop process. I zoomed in on
the track so I could accurately see the end of video and using the razor tool, I cut the music
track so that it stopped at the end of the video.
16. Process
I added each individual sound effect in, for example, the coconut sound effect and monkey
getting hit, by dragging them and dropping them into the timeline on the relevant frame.
I played the track and realised the volumes of the sound effects were a bit too loud, so
using the effect controls, I lowered the volume to -6.5db.
I also added in a crossfade effect at the end of the music track so that when the level
complete sound played the music faded out and didn’t overpower it.
17. Process
For my game logo design, I created a 720x720 pixel document. I inserted elements from my game into
the new document by dragging them and dropping them into new layers from my game document.
I placed in the background and lined it up so that the double palm tree was centralised. I then scaled
the monkey down to make him fit the picture. I added in the coin to show that is something the player
needs to collect and a falling coconut to show that there was some danger in the game. I then, using
the text tool, typed in the title Monkey Around. I used the Agent Orange font that I’d sourced when
carrying out my pre-production and used the same colour as the monkey’s t-shirt to tie in the colour
scheme.
Editor's Notes
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.
Discuss the tools and processes used in your production. Log your thoughts and feelings about your work.