This illustration is based on a menu sketch from earlier in development. In the real world on the protagonist's blanket, their games console with Pixel Plasters running doubles as a menu screen. This suggests that you are about to go into this game in both the game world and the real world. References on the blanket are to life-simulation games that are known to help with mental health - while also being items that are (most) likely to be in a child of this age's bedroom. There is also a plush doll of secondary character Elio - who the protagonist meets later on in the story. This is a fun little implication that the protagonist became a fan of this game and bought this.
The first page is focused on setting the scene. It is daybreak to symbolise the beginning of new things, and the fall of darkness; the world is calm and serene. I designed the panels in this very slow and steady manner to emphasise this. The panel progression also builds up to the last one, which reveals all of Cotton for the first time. As the first face we meet in the comic, this was important to make interesitng. I also drew him facing left when noticing something afar so physically he is guiding the reader to turn the page and find out what it is. The extended panel at the bottom is to take advantage of the comic format to show two moments in the same. It also provides a continuation of the prolonged moment in the opening page for the audience to understand what kind of place this is.
Page 2 is the one that has the character switching button. It's the first illustration of Atlas, so it was important to have this artwork significantly larger than the other things happening on the page. The pacing on this page very steady and this is likely due to the conversation being very slow and not overly informational. I decided to spit the last panel into 3 seperate pieces, but not in a way that would mirror the top row. Having two halves of a triangle, and another panel with Atlas breaking the sense of boundarys, gives the visual impression that they are talking about a flashback. The two triangles making a whole panel help to make this clear - as well as the darkness indicating a different time of day.
I broke the fourth wall in writing button instructions on Atlas' introduction panel, but I don't believe that it negatively affects the flow of reading. The buttons could very easily go unnoticed without including this text. I drew a cosmetic X button to give the impression that this window panel was a little bit different to the normal ones.
Cotten helps Atlas up - in a sense of helping them to reach a better place, and this is the beginning of that. The rising sun also symbolises this newfound positivity and warmth. I tried to guide the reader's eye with the arrangement of the middle panels leading upwards to the final column. It is also to lightly convey the idea of the protagonist being pulled up with the panels themselves. I found trying to make a composition using Atlas themself between these panels was difficult to do, but leaves worked really well, and their simplicity compliments the busier illustration of the village that follows shortly. They show a progression of time and it makes sense that they can naturally move in this direction. It also connects to the next page, which also uses these leaves. In this page the leaves are helping Atlas reach a better place, but in the next page the breeze and leaves make them cold as they are slightly afraid of changing things. They are not only a symbol of passing time but in particular the moving journey of Atlas; Atlas' time.
Cotton continues the warmth theme - giving his scarf to Atlas. Despite this love from a new person, I knew that I wished to convey the idea of Atlas being wrapped up in their feelings, and feeling suffocated by their flaws and emotions. They feel too lost to see what's right in front of them - but this is the first shift in facing these negativites head on. The page feels very cold in tone to represent this too. When considering the composition, I knew Cotton's warmth had to be the focus of the page. After this ,the location changes slightly, but instead of drawing walking, it was more important to visualise the conversation and emotions happening during this time. I think this allowed the pacing to feel like a little bit of time had passed since reaching the final panel, despite not many panels being in between. The small illustration of the general store depicts the place as very well kept and within a natural environment - somewhere that would be typically ideal for general mental healing. I guided the stone path out to the corner to lead the eye towards the next page.
This page was very tricky to compose as it had a lot of information to share, a new character appearance and new character dynamics all on the same spread. I couldn't really spread this out to more pages in the time frame, so it took a lot of experimentation to make it work. I was finding difficulty in making the panels read in the right direction, and I continuously asked peers how they naturally read the comic - so that I could get a realistic taste of it's perception. I really like how it turned out but it took a lot of figuring out. For a page with a lot of things happening, it no longer looks too busy at all as it is very balanced out. I also had to spare a banter exchange between Elio and Cotton for the sake of guiding the reader in the right direction, but the latter is definitely the more important thing for the page.
Elio takes Atlas out on their first delivery. I wanted to use less panels on this page so that the pace would slow down a little. I also intended for the panels to be less busy, for a contrast to the page that came before. This part of Atlas' journey is a slow and mindful one, where they are taking in their surroundings and beginning to adjust to change. I think the primary colours on this page work really well together in conveying a positive and bright mood - that of being offered a place to stay, having purpose, but also that of a place that Atlas recognises as beautiful and serene.
I chose the pair to offer a delivery service instead of gardening (like in the original concept) after being inspired by the animation Violet Evergarden - a series that focuses on writing and delivering letters - making sure everyone receives the messages they need to hear. It was very much entwined on my mind how much this relates to the purpose of this comic and all the people that should be delievered its message. It was a very emotional series with a protagonist that suffered with mental health herself too from being a child-soldier. So while Elio and Atlas deliver goods, they are also delivering a message to the audience. It is also a common quest in video games to deliver things to others. In Stardew Valley, a mindful game in the research part of the project, you can accept such requests from the general shop's notice board. Similarly, in Animal Crossing, when starting at the town in many of the games, the general shop's owner will ask you to deliver products to town folk in an attempt to lightly push the player to make connections and learn about their new home. This is very closely linked to the ideas in the comic.
The bedroom in the comic is also a reference to life simulation game Animal Crossing. Traditionally in the games you would always start out renting a house or a room from a Tanooki landlord - and the situation of the protagonist's whereabouts is a light parody of this in general. This one tiny room would come with only 4 items, always being a bed, a music player, a lamp of some kind, and a cardboard box. It's very fun to draw in references like this that still feel natural to the story.
For this page of the comic, I was striving to depict Atlas as melancholic, so the tones of the page are very pale and dim. I also illustrated a plant losing a waterdrop to create an illusion of a tear droplet splash for that comic panel. Elio's positivity is divided by a cloud, as if to say this optimism is something Atlas dreams of having, but at this moment cannot obtain. The space around Elio is also suggesting the vastness of these "wonderful places." They may be far away, but who knows how many are out there? You'll only know by looking up, which Elio does in the last panel. I also shuffled the speech bubble placements to give a subconcious path of stepping stones which reach out into the bottom corner/next page turn, directing the eye. The cloud is also subtle foreshadowing of the next page containing a memory.
This spread is half set in the real world, in a series of flashbacks projected by Atlas. The other half resumes the active happenings. I thought it was definitely important to contextualise the setting. This scene makes the reader aware that this is infact set in a video game for the most part - and it also gives a window to why Atlas feels the way they do. In composition, I wanted to seperate the sides for clarity. It is already considerably difficult to design horizontal spreads that read in a linear manner, so I decided to keep them apart.
I used dark colours on the flashback half to reflect the emotions of the protagonist. I really like how the contrast came out, but I would improve on this page by experimenting with layouts even more so that I don't have to manually draw a line to help with clear reading. I added stars to the background of the flashback to relate to Atlas' darkness but also the light that comes from finding this gift. Celestial/space themes also push a narrative of these two worlds being far apart, but connected.
This page is a small timeskip to future Atlas adapting to life in Wishleaf village and learning how to take care of themselves mentally. This self care is presented in polariods as to coinside with making good memories that will last forever. Polaroids themselves are similar as a frame to regular comic panels too, so I wished to take advantage of this. The page's composition is quite chaotic, and I would probably experiment with this layout more if I had more time. But the intent is that this is Atlas' wall/desk/etc. and it's a physical representation of all the things running through their mind and life. While the speech can be interpreted as being from Elio's customer, it also mirrors the way future Atlas feels.
The newfound hope in the game is carrying out into the real world and affecting real-world Atlas. This is the meaning behind in-game Atlas emerging out of the screen and looking directly at the player. This world is real to them, and it's making them feel better in real life too. The line between their universes is mentally blurred. They are also in control of their own world, holding it gently in their hands and feeling the comfort of permanent warmth. As annotated on the original script too, the high smaller pannel on this page is to mirror page 2, the position in which Atlas is first seen. The illustration is flipped upside down, as is his expression - to show that the way Atlas feels has changed. It also connects their game-world and real-world selves in the same way the the key illustration on this page communicates this too.
The original options screen was very bright and off-theme for the project's aesthetic, so I requested that the design could be minimalised. It was best to keep it looking calm and simple, and you can see that just by comparing menus. I also asked the programmer to download my custom font (.ttf) file so that the text could be uniform throughout the comic.
For the credits page, I designed a simple image in Photoshop using the same colour theme and the text tool with my font. I considered adding illustrations to this screen, but I didn't want to make it too busy.
Above is a preview of the final menu illustration being functional. I had to export all text as seperate buttons for this to work, and I sent Logan a template so placement on his end would be easier.
A last-thought touch that the programmer and I thought about for the project was creating a custom icon for the .exe program. While I could have designed something for this, I think a cropped version of Atlas' pixel self was the most perfect thing I could have used for this. It is still clear even when small, for that was it's intended size, and up close it is still visually interesting. Although this is a small thing that I have added, it adds a lot of professional flair to the game.
The image switching mechanic is now tied to selecting a character. The character you select on page 2 changes the image on page 2 and beyond that.
A look at the first Atlas sprite when imported into the program. It works as intended! I did notice that the sprite was floating slightly above the baseline of the frame, and directed the programmer to edit this.
Here, Atlas' first and second avatar versions are imported into the program. They are functional and feel very consistent. I made the decision after viewing this to remove the preview pane for sprite selection. It slightly interferes with the key illustration, and the character selection is clear enough without it.
Since 34SP limits how big of a file I can upload - for convenience this time, I have uploaded this .zip file into the Google Drive folder of assets for the project:
The first step of the process was to make sure my images are the correct resolution and size. Logan then had to scale the grid of the game engine to fit the canvas. Even though computers only view 72dpi, I am designing at a resolution of 300dpi, incase I need high resolution images to print for my portfolio later down the line. I cropped my scanned sketch of page 1 to the correct size:
Logan had to experiment to find a scale that worked.
On getting the scaling right, we realised that the original resolution of 1280 x 720 pixels was far smaller than expected, being only triple the size of the very small sprite. We experimented with how we could scale up the size of the image and have it be of a correct relative to the sprite size.
I chose the x3 scale image size, for it would be less likely that the sprite would interfere with text/visual elements. To help with this further - we implimented a jump animation for the sprite, and Logan imported a stock sprite onto the page as it would sit in the final version, to be able to preview how this would work. You can see from the image below how this is very important.
Above is the same preview, but on the x2 scale of the image. Using the x3 was definitely the better choice. This new resolution meant that all future images should be 3840 x 2160 pixels, at 300dpi.
Logan was able to perfectly align the edge of the image with a 'floor' for the sprite. The 'floor' and 'walls' (vertical strips) will just appear as borders - but are necessary to make the page turning mechanic work. As the character hits the right, partially invisible 'wall', the character will move into the next 'room' - like a game. The next 'room' is the next page of the comic.
Above is the final scale of the 'room' which functions in harmony with the size of the image and the sprite.
Logan adjusted the camera to make the artwork central. This created black bars on the sides, but these can be changed to any colour. The decision of what to do with this will come when the comic has colour.
The next things to be implimented were the jump, the avatar system and the music (sound effects were added early on). I trimmed and added fade effects to some suitable tracks (previously metioned in a #Sound blog post) so that they wouldn't sound so harsh as they loop during reading. I used Premiere Pro to do this.
Between Dreiton (by C418), Hidden Structure (by Leavv) and Lighthouse (by Leavv), I am unsure which to use. I will decide by listening to them while immersing myself in the comic when the prototype is completed. It is then that I can decide which one supports the intended atmosphere and matches the pacing of the events in the story the most. I also learnt how to make a a track muffled (for example, sounding underwater) - for potential use on selective pages or menus. I used a tutorial and Premiere Pro.
Logan also informed me, regarding the buttons for switching avatars, that each button will need to be a .png of it's own and not within a larger image. This is simple going forward, as the buttons just need to be designed in their own layer, exported as a .png, and trimmed down to be without the entire canvas size. This applies for any interactive elements.
(Above) The movement feature of jumping has been implimented and feels very light, in line with the comic's atmosphere.
(Above) The avatar selection mechaninic through interacting with an element on the image is now active. This test sample uses pre-made sprites (one being Kirby.) When I come to animating my own pixel sprites, I have to export the frames as single images and make them into a 'sprite sheet'. This website will be useful for creating a sprite sheet: https://ezgif.com/gif-to-sprite.
(Above) Logan also implimented a preview pane for the avatar selection. This can be moved anywhere and turned on or off. Using this feature will depend on the final layout of page 2, but I don't think it is particularly necessary in this project. If it adds visual impact I may find a way to use it.
(Above) A definite test video of all of the implimented features so far: sprite running and jumping, avatar selection buttons, rooms, a platform, music, sound effects, and the artwork in the background.
Additional Notes From This Process
Brief design notes that were amidst the character design sketches.
Above is the first trial of the comic's application. Logan programmed this under my direction, using Unity. The sprite here is a sample - it is just to test if the page scrolling works. As you can see, the concept is actively functional, as when the sprite touches a side of the page, it moves the screen to the next. I am moving the character across the screen here by using the left and right arrow keys on the keyboard.
I can import my own animated sprite, as well as animated comic illustrations as the "backdrop." Audio can also be played. Although I did not record it, there is a main menu before you enter the comic like this. I have mentioned this menu and its features in a previous blog post. The borders around the outside of the box can be customised, but its pattern must be designed in "tiles" (for example - blocks on Super Mario).
Mock ups of the menu functionality by Logan (programmer.) The fonts/artwork are placeholders and he is waiting for my assets, but it now functions as it should.
I enquired about the possibility of a "Controls" option on the menu, but he made the point that such a thing isn't really necessary unless controls can be changed/mapped to different keys/buttons. The comic will be able to be controlled by both WASD and arrow keys, so it is too straightforward to be needed. I argued that it might not be obvious to the intended audience that you need move the character sprite like needed, or how. We came to the conclusion that if the controls aren't clear, he can program a brief instruction to appear on the screen, before disappearing again. A momentary hint within the actual comic pages, rather than a subsection on the menu.
Recently I had a meeting with the programmer about if the more refined decisions would still be compatible for the project being made in this game engine - things like knowing a general page count (12), and that it will have animations. It's still possible, but in discussion we talked about how the animation and interactivity could be linked in ways that more took advange of what a game engine can do.
While making the comic into a fully fledged game had been previously considered and rejected, for it would likely distract from the point of the comic and be an unrealistic amount of work, we thought of a simple mechanic that could bring a lot of subtle charm to it. Originally, the interactivity is in controlling the character with arrow keys or WASD and as a corner is touched, the page "turns" in its respective direction. There is a whole platform to work with here, so how can it be utilised to give more character to the comic, but in a way that is still a realistic amount of work for the deadline?
The solution we thought of was if there were things on the platform that the character could interact with on it's way across the page, it could do a little animation upon touching it. It could correlate to something happening on the story page. E.g. If a character was watering flowers on the comic page, while moving the sprite across the bottom, they could come across some little flowers, and do a water animation. This type of interaction is very simple to do on this game engine, so it would only be as much work as me designing an extra couple frames of animation. Logan can program the animation to play when in contact with another object.
Another idea is that triggering the plant watering animation on the platform (for example), could also trigger the respective animation to start on the actual comic page. It is a direct link and would give even purpose to movement other than needing to turn the page. There are 2 ways this could work. 1. The corresponding animation only plays when you stay within close proximity to the interaction object/while doing the sprite animation. 2. Although the sprite animation still stops when you leave the interaction object, the animation stays on. This could reset if you turn the page and then go back again.
It is like playing with the concept of an on/off switch.
I think both ideas are good opportunities for making use of the game engine to improve the user's engagement and the storytelling. The visual impact of the second concept is changed the most: if animations rely on the user moving the sprite, the animations will not be on until triggered, and may be seen for less time. It also means every animation would be expected to have an interactive object to trigger the animation (or it would be confusingly inconsistent), and this could become very cluttered on the platform. However, having this mechanic encourages the reader to use the sprite to engage with the comic more, whereas in idea one, it is still quite seperate from the comic technically. But simple is sometimes best, and idea one would still cause the reader to make connections between the sprite animation and the content in the story. It is less of a forced engagement and would still be very charming.
I conclude that I think idea one is the best fit for this project.
Sketches while having the meeting:
Development compilation for Pixel Plasters.