'Who Framed the Toons' is a project that a small team and myself created during our year one level three course at Canterbury College, in which we where tasked to choose upon several Intellectual properties from the 80's and remix them into something new as well as transforming it into a new medium entirely. And with so many to choose from, we as a team decided to create a Video game based upon the world of 'Who Framed Roger Rabbit'
Work began with our pre-production phase in which we all were brainstorming to see how the game might look or play.
To begin my first line of experimentations for my group project, I decided to create a mock-up for a potential Battle sequence for the game we are making, utilizing the use of Photoshop to firstly create a sprite for both the weasel and Roger respectively, exporting them as a transparent PNG to place on a pre-made Pokémon battle template in which i also added the names and main box text to as a finishing touch. What I need to do next however is think about what the scenario would be like before the battle, leading me into a mock-up of an interrogation segment of the game.
For this next mock-up i decided to experiment with in-game interactions as well as the in- game HUD exploring my options with how different interrogation options would play out, with these pieces revolving around Roger Speaking with the likes of Bugs bunny and one of the antagonist weasels.
Furthermore, thinking about my options for how the game might control in these situations.
This informed my ideas by mapping out what might happen in any potential scenario, and show and possibly be a reference to our influences such as other RPG titles. My next steps are to consider another way these characters could interact, and for the second piece, it was another interaction that carried on from the previous mock-up showing how more general conversations would play out rather than an interrogation.
while experimenting with a new style of HUD I wanted to see if it blended well with the scene, despite this being just a sketch, it informed my ideas by showing me even more possible ideas I can share with the group and potentially transform into its own asset, what I need to do next, is to develop a more hands on piece of work to better visualize a more finished mock-up than previously made to potentially establish its art style.
For this piece, i decided to go in a different direction and change mediums for change of pace, I firstly began by laying out the basic shapes and skeletal landmarks to grasp the general shape of Rogers head in different contrasting colors so I can differentiate them during the build-up.
And as progress continued I realized I needed to get a little unorthodox with how I wanted to shape facial elements such as his mouth and eyes, ultimately putting me out of my comfort zone of the symmetrical pixel art I'm so very used to usually.
However, for the final stages of lining this mock up I realized the purpose for this portrait, and that was to use them when dialogue boxes appear, thus the blue square around Rogers head, reminiscent of a Mega Man game, but that might have ultimately been a flash in the pan idea.
For the finalized version of this mock-up, i was quite pleased with the result and was perhaps my best rendition of Roger so far in this project as playing with the colours was rather enjoyable, this lead up of progress informed my ideas by showing myself the potential art style this game could end up in. and seeing as I was already experimenting with time to spare, I created another interrogation Mock-up to to better compare the games influences.
For this piece I wanted to visualize an idea for another battle sequence, this time influenced by the game Undertale, in which I borrowed a battle template from the game itself and then utilized the portrait I made earlier as a base, deleted the colours and replaced any line work with white, then rendered the image to be transparent to fit the template. This turned out to also be an effective experiment as it fits the aesthetic of the source material.
This experimentation was intended to step away from character assets for a time, and create some in-game items to use during the battle sequences, inspired by the exaggerated weapons used in cartoons such as Tom and Jerry and in Roger Rabbit. This informed my ideas for other potential effects these items might have on the game mechanics as well as what other items from cartoons could be an influence, what I intend to do next is step back into traditional art and create something fresh, that isn’t an already established weapon, trope, or character from another cartoon or series.
For this session, I decided to create my own original characters for the game outside the source material, and my aim for this experimentation was to keep the series fresh with new faces as to not cause stagnation from seeing the same cast repetitively, this informed my ideas further to delve back into the themes of character tropes and the visual signifiers and societal stereotypes of different animals, such as lions being broad, intimidating and proud, Also playing into the trope of a rich “Fat Cat”, a card shark that is quite literally a shark and is sneaky as well as a diamond thief cheetah who is portrayed as an animal equivalent to Jessica Rabbit mostly planned to be a villain later down the line.
For this piece I begun working on a Pixel art style render of the Cheetah character from earlier, and using Jessica Rabbits body shape as a reference with her incredibly pinched waist, I managed to quickly plot down each part of the body, using different colours to better differentiate them from each other much like the other pixel art ive done previously.
Secondly, I made the addition of her feathered hat which came out much better than I thought, once again using different colours to differentiate each segment, as well as this I shaped the head into a more cheetah like shape rather than using the skeletal landmarks circle directly.
I then decided to tweak the proportions of her body and clothing, more predominately the skirt, I made it a touch shorter to accommodate a more natural and anatomical shape, as well as the differentiation colors are becoming more clustered with items such as the bow, hair and belt to conjoin the top and bottom half and prevent the design from being somewhat flat.
This was a test to experiment with my first draft of colours, using primarily warmer tones and testing the shading of her fur and spots, however, as mentioned by my tutor the colours and contrast need to be pushed further to get a better read on the design overall. The window of her dress also has been changed to a circle for simplicities and preventing mess in terms of using pixels.
With the piece completely shaded and lined, I decided to make some changes to better compliment her colour scheme, using a very light green to compliment her eyes and contrast with her other warm tones, and worked very well. And to speak of the eyes, changed their shape to something more befitting to her sly and sassy character, even extending the eye shadow, and just like that, her apathetic look was complete.
For this task i created an original map of only a small section of ToonTown from a top down Perspective, I aimed to make this as authentic as possible with a few liberties to keep it fresh for the eyes when something new is added, as well as making points of interest for the player to visit, and that will be semi-important to the plot in concept, adding in abstract shapes , the addition of more oddly shaped buildings where added to break the monotony, this was also a more improvised part of the map, and with this rough mock up done, I’m pretty happy with how it turned out, and how it might turn out during the primary production phase if we choose to use it as a reference.to better fit the theme of the scene, and while this is exceedingly simple, it might lead to something that can be used later on.
For this session I began by creating another mockup of Roger just to test out the Pixel art studio app, firstly mapping out key areas of Rogers head with bright contrasting colours, I then cleaned up any hard edges that surrounded the potential line work.
And after an hour or so experimenting with the colour wheel, opacity and shading, the outcome was rather satisfying to finish it with only my finger and the trusty zoom tool.
This didn't exactly inform any ideas, but was just a fun experimentation.
For this Experimentation and work in progress i was asked to Create a concept design of how Roger might look during gameplay. To begin, I sketched out the general skeletal landmarks for Rogers body as if it where facing forward from an upward angle, sketching a square to represent where his body would sit with his head, the ears I had to experiment with my understanding on perspective and how big they might seem due to the distance from the “Camera”
Next, after the main shapes of the body where done, my next obstacle was achieving the correct sense of symmetry I wanted, this was extremely prevalent when drawing the hands and cheek fluff, I also couldn’t quite get them to look as natural as I wanted either proportion wise.
For Re-creating it digitally, I was recommended to use the ‘Autodesk sketchbook’ app on my phone to draw a digital rendition of my traditional artwork from before, it was all laid out and worked with easily enough, however using my finger soon grew to be tedious, but with the aid of the symmetry tool, curved rulers, and ellipse tool, it made my workflow a little easier.
This being the final render of the first digital artwork using Autodesk sketchbook, I was quite happy with the results that I got, for some sections that didn’t require symmetry such as the hair puff and ears, I turned it off and worked around it. This only being a concept sketch.
This piece is the first stage of several digital art pieces intend to do over the next few weeks and as so I started creating initial sketches of the first two of how I wanted to portray them digitally later, that being a neutral, talking expression, as well as a shocked expression. I had to venture outside my usual art style to reach a closer resemblance to the IP’s art style, and it’s extremely exaggerated proportions. The purpouse of these soon to be digital sketches are to be used as expressions for NPC talking interactions each for a corresponding Piece of dialogue.
And with the sketches done, I begun the digital line art using the Autodesk Sketchbook app on my phone, this being another venture outside my comfort zone, as creating digital art with my finger, rather than the usual tablet and pen, its begun as quite a slow process while I get to grips with the tools the app offers with the aid of zooming, and shaped, and curved stencil tools.
The second portion of which I did the colouring and certainly had its missed opportunities such as forgetting to place the colour in its own separate layer which made the process lengthy, but overall worth It by the end of the day as I began experimenting with different tones of shading to help the piece pop out and complement its style, and what they achieved in the source material.
Some further improvements I made upon the second progress shot include some softer colours for the inside of the ears to help better differentiate it from the tongue’s colour, I also drew the hair, which at first I forgot about, and tried some three tone lighting to experiment with, and how its both slightly hidden behind the ear, and in the foreground where it would be reflecting light. The bowtie however was exceedingly simple to colour, as I just used the ellipse tool in yellow, and then filled it in with the bucket tool.
Next, after a review of our progress by our tutors, I was informed that the ears could be improved tenfold if given a slight curve, and curled on the other, and with that, it made them a lot less rigid, and/or static compared to the previous draft I had made, and came out much better than anticipated.
Here is the final piece with his now added dungaree buttons as well as additional shading and lines to the ears, and to say the least, I am very happy with how this turned out, and with this complete, it is to be used for further interactions with NPC characters.
For this piece i I began production on the second emotion for the NPC interactions, that being more of a general talking face for whenever there isn't any sort of conflict happening during dialogue work on the second piece, being the neutral talking face.
and now using to the processes applied from before, it became a little easier and faster in the long run, especially with the discovery of the line predication tool which smoothes out curved lines first, or second time rather than the usual multiple strokes needed to get a satisfactory lines at best. And with this newly discovered tool, Its line prediction could be turned up to help with even smoother lines, however, it sometimes predicts those curved lines as straight lines.
Then I started with the base colours to add to yesterday’s line art, remembering to create it on a layer underneath, all while colour dropping the colours of the previous piece to help with the consistency of the colour between the different shots of each emotion when in game.
Then with the final steps at this point to add the shading and spots to his bowtie, this second piece is complete; adding, and experimenting with the shading is becoming more fun the more I do it overtime as I work on more pieces.
Once that previous piece was completed, i went immediately to the next set of emotions, that being angry, and sad, and by heeding the advice given by my tutor about loosening up my art style and becoming more relaxed as I work, I could really start to have fun with how I could bend and exaggerate these emotions to their limits , such as with making his bowtie, hair, ears, and cheek fluff droop, as well as making his pupils larger and shinier to compliment the overall mood of the piece.
With this being the finished piece for this emotion, it once again, has to be my favourite, primarily for how fun it was to draw, as well as accentuating the shading and looking where it might reach due to his proportions, and as such i am excited to see this asset in action.
I once again began with the line art, as I was quite used to this process at this point, it ran as smoothly as it could have any other piece, however, figuring out his mouth and how it would be shaped to compliment his emotion.
As for the colouring of this particular piece I decided to follow the guides of the sketch and add flames to his eyes to better extenuate his mood, I also had a certain idea of where I wanted this to head as I did the tears on the previously , however, during the final preparations to finish this particular piece, I keep noticing throughout them that I occasionally overshoot said colouring, and noticing this, I turned the background black to pick them out to erase, to help clean the final transparent image.
And with the final product of this piece being as it is, I once again couldn’t be happier with the results, especially with the flames almost glossed over the eyes.
As I was gradually enjoying more and more the process of creating these emotions for roger, I wanted to go for something that portrays not just happiness, but a sense of loving giddiness, especially the kind that Roger shows in the film, and possibly beyond with more blending of my won visual style. Next, with now the line art for this piece placed down I quite liked where this piece was heading, as well as my confidence for the future pieces in general, furthermore, I may have had to get a little more experimental of how Rogers face is shaped to better accentuate his Joy
I promptly began with a clear objective of where this piece was heading, making small additions to the piece that would accelerate the emotion presented like the sketch, such as the heart shaped head curl, and floaty hearts I added in post.
I was incredibly proud of how this turned out, and how far id come in terms of using Autodesk sketchbook with my finger, as well as gradually learning a new art style along the way, although drawing and shading the spots accordingly on the bowtie grew tedious after a while.
And with the set of Roger Rabbits emotions completed, I quickly began creating more assets to digitally draw over, the start of drawing the cheetah felt much more at home than drawing roger immediately as I was much more akin to drawing animal characters in this style. With a few more additions, the intial sketch of the cheetah was already complete, however, I made some design changes to help better my workflow and avoid cluttering such as the big hat feather as well as the bow that goes in her hair, I also changed the way her paws/hands looked as I wanted to present her more femininely through her hand and body language, although, drawing hands has always been a challenge, but one I was generally willing to accept for the sake of experimentation.
The stage I began the lineart was rather fun, firstly getting to draw the thickly drawn eyelashes to better represent her character, but after much tinkering, and tedious erasures of trying to challenge myself to draw the hand, I stuck with my concept art and returned it back to a paw to better help my process and to continue smoothly.
And with the line work complete, I had to sacrifice some detail for the sake of time and the deadline yet again, and that being with the cheetah spots, using the ellipse tool quickly make spots in varying sizes, luckily however they look fine as they are as it matches somewhat with the cartoony style I was going for. Furthermore, I drew additional teeth from the sketch as it might have looked odd to have her with mostly gums when drawn in high resolution.
As for the beginning of the colouring phase, I colour picked, and dropped the colours of her concept art to help me understand her pallete better, and scribbled where it will go,
however, the use of the pixel art style concept art wasn’t quite enough to fill in the larger spaces of a full resolution image, so I had to experiment with more subtle tones, and shades to better communicate my idea of this character, and with most of the flat colours layed out, I had a proper idea of what kind of shading I was going to add that wasn’t from the source concept art, and hopefully use this as a reference for future art of this character.
With this first piece of the cheetah coloured shaded in the correct tones and hues, with future pieces of this character I hope to use this as a colour reference to colour pick from in another layer to help with consistency with the change of different scenes much like I did with Rogers colours, and set of emotions.
I began with creating the basic line art of the shocked expression as I felt the angry expression I would save the hardest for last while I get back into the swing of things after a break. Making the swooping thick eyelashes was a little tricky as it had to be not to thick, nor, not too thin, so it took a few tries to get to a stage that I was happy with, the ellipse tool helped greatly in that regard as the enlarged eyes would have been a chore.
And with the line art completed, the extra spikes of hair, fur and jagged whiskers from the sketch helped a lot in terms of making the expression really exaggerate itself, the teeth once again where somewhat of a hassle as getting them in proportion to the face and going against the initial sketch was tricky, but eventually getting them all lined up was satisfying to say the least.
For these next set of pieces i quickly made the base line art for a new piece drawing over the angry expression, I felt with the deadline nearing I decided to prioritize some of the more basic emotions to at least get the message across over dialogue based scenes.
To continue, I was discussing with my partner about how the fill bucket doesn’t always fill what it needs to and fills the whole page, and was suggested to me to lower the tolerance on the fill bucket to make the fills more specific which helped immensely, and the second picture was the result at that point. Furthermore, using my new discovery of using the tolerance on the bucket tool, and turned out better than I had hoped and the process became a lot quicker overall.
This being the finishing product, I couldn’t be happier with the quick results, the ellipse tool served to be very handy in the long run for the spots once again much like previous pieces of this character, furthermore, I made additional shading to her paws to give them more depth.
For my next course of action I spared no time in continuing the next production piece for the NPC emotions, this being the shocked emotion, and I began as usual with the line art of the previous sketch that I made, next I layed out the base colours using a previous reference, this becoming a faster process due to my extended use of Autodesk sketchbook.
Next, much like the previous cheetah pieces, I mapped out the lighter colours of her fur without an outline, this is to reduce the risk of the line work becoming too busy and to make it seem more natural. And then with the shading and additional details such as the ear fluff and choker in place my next course of action was to clean up any loose shading on the transparent background and add the spots with the ellipse tool
And with the complete Piece complete it was refreshing to portray this character more commonly in my own style and see where the shading would go, overall however my confidence for this and future pieces is as high as ever.
With beginning the lineart of the sad NPC expression It felt quite refreshing to draw a new kind of positioning in the face. With only a little bit of trouble trying to get the perspective right but came only really well! And with the primary line art now complete, I was happy with the general result, but might need some improvements to help further my ideas more.
I began with laying down the base colours, while looking rough with the colouring, it ensured no peeking colours in the base image, and is cleaned up immediately, and during the coloring process however some line art had to be edited to accommodate the colour, as well as not having messy lines.
Now the base colours added, I experimented more with how the shading might look in a sadder scene, so more of an overcast of shadow from her hat felt more appropriate.
For my next steps, and much like rogers sad emotion I created a new layer to create the effect of the tears to then turn the opacity down to create a see-through effect. And then for the final stages of this piece, I made the addition of the spots as well as cleaning up outside the line art for the final transparent render. Overall I was quite proud of the results and how the tears came out.
For the completion of this piece I felt quite accomplished by the fact that It felt so much easier as well as far more enjoyable than the other pieces I’ve created as well as the processes on Autodesk sketchbook becoming somewhat of second nature to me now.
For this final piece of production I began and completed the final emotion for the NPC interactions and this one in particular was the happy face to use in game as an asset much like the previous pieces I’ve created.
I began by digitally drawing the lines of the sketch I created previously in the production, it however took a few tries to perfect the shape of her teeth to achieve a better result anatomically.
Next I then, learning from my previous pieces, firstly block filled the primary colours of her fur, hair, and hat. And as with using the bucket tool, I had to next clean up the flash lines made with the excess the fill left.
The next, and final phase of this piece was to make additions such as the shading, spots, and highlights such as on the eyeshadow, paws, mouth and fur. I then cleaned up, and erased any outlying colour that may be poking out that may show on the transparent PNG
This now being the completed result of my final piece for NPC interactions, as well as being my now completed contribution to the project, I was incredibly satisfied with the results I got with the sketch I created previously with little to no edits to the line work unlike my previous pieces of work for this project.
