AIRUSANI
  • Sequential Art
  • Illustration
  • Pixel Art
  • Sketchbook
  • Emoji
  • About
  • Sequential Art
  • Illustration
  • Pixel Art
  • Sketchbook
  • Emoji
  • About
AIRUSANI

prototype application version. 1

17/12/2021

 
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:

https://drive.google.com/drive/folders/1yAk4NYULTGPnzh5pZqct-WpS7i_V2Y4L
​
  1. ​Download PixelPlasters.zip
  2. Extract the .zip file
  3. Navigate to the PixelPlasters folder on your PC and open the Pixel Plasters Application 

moving page layouts to digital

17/12/2021

 
Picture
Picture
Although the process of designing pages in my sketchbook was providing interesting results, the process felt very slow due to so much consideration with panel placements. I felt the process may benefit from digital sketching since moving panels around is much more accessible. Saving screenshots regularly and being experimental is still very important.

I have also been struggling with pacing when illustrating the story, so being able to more freely redraw panels and dialogue is very helpful for overcoming problems. On Page 3, I had too much I needed to condense into the page, and Page 2 had somewhat wasted space. I redrew Page 2 as my experiement into sketching with the iPad. The great thing is that my images are ready to be cleaned up and coloured immediately, as I can sketch on a 3840 x 2160 pixels canvas at 300dpi from the get-go.
Picture
Picture

making a prototype program

17/12/2021

 
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:
Picture
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.
x1
x2
x3
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.
Picture
Picture
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.
Picture
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.
Picture
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.
dreiton_final.mp3
File Size: 7805 kb
File Type: mp3
Download File

hidden_structure_final.mp3
File Size: 2444 kb
File Type: mp3
Download File

lighthouse_final.mp3
File Size: 2154 kb
File Type: mp3
Download File

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

Picture

Composing page layouts

8/12/2021

 

Technical problem solving due to layout choices:

Picture

Plot breakdown to simplify the layouts process:

Picture
Picture

tiles and animation

25/11/2021

 
Brief design notes that were amidst the character design sketches.

setting

24/11/2021

 
Picture

character sketches

18/11/2021

 
From the story draft, I knew I needed a "cast" of villagers/characters to be able to fulfil the narrative. I took some time to draw conceptual sketches of ideas for personalities and roles of these characters. Although it probably isn't extremely important that minor characters have strong designs, I think it's important that they convey a somewhat realistic, natural warmth - and an overall sense of community and life.

​I noticed in my research that slice of life/simulation games often reached an audience with more impact when the characters were down to earth and portrayed as genuine unique individuals that could connect with the player. It is the importance of a character feeling 'real'. A character that has a life, thoughts, and feelings of their own - is one that can be meaningful and believable. Things to consider in designing and writing the characters beyond conceptual sketches are the elements of:
  • Appearance (reflective of everything below)
  • Personality traits
  • Hobbies/role
  • Purpose in the story, and to the protagonist (audience)
  • Dialogue (How does all of the above affect the character's choices of words? Do they have a dialect? What kind of person are they? What's their relationship with other characters or the protagonist?)

I think small details can make a big difference in believeable world building and character deisgn. For this reason, even choosing a logo for the general store's apron matters. It provides a reminder of the world they are in, and consistency can subconciously lead to belief.

I also generated some further concepts for introducing more game related ideas to the interactive comic, such as the inclusion of profile cards, skill levels, titles, moods, ranks, and having a visible inventory. Not all of these ideas will be necessary but they are heavily inspired by current simulation games. Levelling up skills, gaining new titles, upgrading a tool, improving a friendship - these are achievements in a game that can mirror real life. A player can find themself basking in the virtual sense of progression and can also practise transferable skills and obtain transferable knowledge. They may learn the consequences of their choices and interactions, how to express themself (customisation), a sense of belonging and purpose, or perhaps they just love working towards achieveable goals and self betterment. Negative experiences can teach valuable lessons, and positive simulated experiences can influence perspectives on real life achievements and progression too. It is for this reason that these seemingly cosmetic features have much purpose. (Image 9 on the slideshow)

Secondary character "Elio" & Refined atlas design

13/10/2021

 
Elio is an important character in the story. He owns and runs the local shop, takes care of the gardens in the village, and mentors Atlas. Drawing Elio with thinner lines, and a more varied palette than Altas' initial artwork, made me realise I prefer this. I chose earthy colours for him, as he is a grounded individual.

Although Atlas is a much more sombre character than Elio - who is cool and chilled out, I felt the need to rework his design a little. I changed his palette from being somewhat 'muddy', to having more contrast. This will help him to stand out more against the sky, since the setting of the story is mostly outdoors.
Picture

"atlas" designs for the set avatar styles

13/10/2021

 

Plan going forward

22/9/2021

 
Picture
+ PDF portfolio for January 2022 hand in.
<<Previous
Forward>>
    Project Home

    Pixel Plasters

    Development compilation for Pixel Plasters.

    Archives

    May 2022
    January 2022
    December 2021
    November 2021
    October 2021
    September 2021
    May 2021
    April 2021

    Categories

    All
    Animation
    Character Design
    Colouring
    Format
    Layouts
    Notes
    Pixel Art
    Presentation
    Setting
    Sketchbook
    Sound
    Video
    Writing

Site powered by Weebly. Managed by 34SP.com