︎ 2022
Project Cottage Pocket Space 
Illustrative Interactive Coding    


Pocket Space Game Design
Design Introduction

    This is an illustrative interactive coding about a ‘Cottage’ theme animations, including nature and animals, with mushrooms and fairies. This is where we go through each characters throughout the entire background scenery interacting with us, guiding on how we can get to the next and next characters. Through the idea of coloring them in one by one until the scenery is complete.
    A simple coloring in game that is targeted toward younger children styles and aesthetics, or towards anyone a cute adorable animations. Each characters would jump and pop out and turn from black and white into a colorful sequences that would animate and be enjoyable to watch at the end. This is just a fun game not a competitive one. 

Music use by https://www.purple-planet.com 



Design Sketches
Game Asset Overview 

    An overview of what I want for my pocket space, an illustrated style and childlike features. A game that brings back childhood memories of a coloring book but into an interactive online game. Where everything is black and white until you color them in and the storyline will start and guide you through.


           
Design Animation Sketches
Details Broken- Up Steps

    Planning out how each of the element would interactive, ideas for the start of my sketching



Design Coding Progress
Setting Up & Upload Design

    I’ve tried to use the push and pop function to place in the sequences so that the animations would play one by one or even pop only when we click the individuals image, but I could not figure out how this works therefore, the animations just play by itself (which is not how I intended for my game). I would love to adjust the sound for each individual image that has been color but I tried the name.stop the animations because error and difficult to listen to therefore I left it as one. Further development I wanted to incorporate, if the inidividual section would be able to animate individually, I would love to incoporate a little size enlarge popping to make it more interesting for both black and white and color to interactive when the mouse move towards it.

    Regarding the use of push and pop functions of the sequence to developed animatation that goes from my ‘black and white’ sketches into colored one as we clicked, these functions are typically used to control the order in which elements are drawn to the screen, rather than the order in which animations are played. (Looping and, true and false, even through the skipping of frames). It might be helpful if i took my functions or techniques for controlling the timing and order of your animations, such as using timers or implementing a state machine.


Illustration Progress
Transferring Sketches to OpenProcessing

     Loading each ’png’ illustrated element onto the page with the correct coordinate so that the sketches is in the correct placement. 



Design Loading Page
Animated Sketch

    I’ve learned a lot about game development coding, specifically about loading screen into ‘sprite’ format animation and incorporating different screens modes to seperate pages to pages into my game. I figured out how to functionally code a loading screen before the game begin using ‘keypressed’ which makes my game more interactive and engaging for the player.


Entering Main Page 
Coding Pages Features


    I’ve learned a lot about game development coding, specifically about loading screen into ‘sprite’ format animation and incorporating different screens modes to seperate pages to pages into my game. I figured out how to functionally code a loading screen before the game begin using ‘keypressed’ which makes my game more interactive and engaging for the player.



Design Reflections

Final Visualisation of the Game


    As for adjusting the sound for each individual image, I could have research further to be able to assign a separate sound object to each sprite, images and then control them individually using the sound functions in my game development framework. Finally, the idea of incorporating an interactive size enlargement effect when the mouse moves over a sprite or image sounds like a fun and engaging feature. I could have added ‘mouse events’ in your game development framework to detect when the mouse is over a particular sprite or image and then trigger the size enlargement effect using animation or scaling functions. The amount of coding knowledge that this project has taught me to keep improving and explore different ways to code your design ideas into a functional gaming platform was extremely exiciting.

Tools Used
Adobe Photoshop
Adobe Illustrator
Procreate
PJ5 Reference
Open Processing 


Mark