Next Door (2022): Katharina Broswik
A game about finding the magic next door.
Responsibilities: Game & Level Design, UX Design, 2D Art, Photography, Code.
Duration: 04.11. – 06.11.2022, 72h Game Jam.
Solo Game Jam Project, by myself. Unity Engine.
Tools: Unity Engine, Procreate
Quick jump: My work on the project
Title: Next Door
Developer: StumbleDuck
Genre: Point & Click
Price: free
Release (itch.io): 06.11.2022
The Game
There are living little woodland spirits right between us. Can you find all of them at your university next door?
The Project
Next Door is the latest game jam project, I created completely on my own. It was developed at University of Bayreuth during the Fanken Game Jam 2022. The theme was: “Two Worlds”. I also included some of the modifiers like Hybrid Art and From Two Different Worlds.
Next Door is strongly inspired by the 10 Gnomes series by Mateusz Skutnik, where he mixes black and white photography of nearby areas with small scribblings of gnomes, which have to be found to complete the game. I created Next Door in this vein to make use of my camera once again and try out making a game in the point & click genre, which I never did before.
Game & level Design
The game mechanics are mostly taken from Mateusz Skutniks 10 Gnome series, in which you have to click through an arrangement of black&white photographs to find sketches of gnomes, hiding in the real world scenery. In my game I switched the gnomes for some fantasy woodland creatures or spirits inspired by Ghibli animation (more under 2D Art). The base mechanics remain the same: clicking on interesting set pieces or at the edges of the screen to move around or zoom in and clicking on the spirits to collect them.
For the level design – if you can call it like that – it was important to include dead ends, where you imagine to find spirits but in the end there aren’t any. This is important because the main purpose of the game is to explore the space depicted by the photographs, not only to collect all spirits. Those only serve the purpose to motivate moving around in the first place, experiencing the beautiful scenery, collecting the spirits on the way.
The main learnings I took from working on the level design was how to organize the complex network of photographs and create the impression of smooth movement through the scenes, which is strongly interconnected with the creation of the photographs right from the start. For a good level design the paths through the scenery must be planned beforehand or directly on-site while taking the pictures. For visually depicting the connections between the different scenes I organized all photographs into a graphic network representation, which you can see below. This diagram helped a lot with staying on track and realizing the connections between the scenes in code.
UX Design
The main concerns for building the UX of Next Door were the visualization of interactable areas and the representation of collecting the spirits. Besides the standard treatment of point-and-click games to change the cursor icon to match the specified action (walking, looking), whose designs you can see in the next section, I wanted to enhance visibility of interactable areas by adding a semi-transparent overlay to the exits of a scene. You can see an example in the image on the right. Note, that the overlay only displays over the exits of a scene, marking those interactions that will lead you to a new area as opposed to just zooming in on an object or part of a scene. The interaction for getting a detailed view on things is marked with an eye icon, not getting the semi-transparent overlay treatment and as such differentiating itself from the traversal interaction. Also going back in a scene always happens by clicking the bottom edge, to ensure consistency.
As in the inspirational source material, spirits play an animation when collected, to give feedback for the interaction. Cute sound effects enhance the feedback for collecting further. There are also little dots at the bottom of the screen which display how many spirits have yet to be discovered.
2D Art
All 2D art in the game is drawn by myself, i.e. the spirits, cursor icons and menu UI elements. They were created in Procreate on an iPad.
The design of the spirits is inspired by Ghibli animation, for example the coal imps from Spirited Away. The style is designed to be simple but soft and rounded in form, with varying thickness of the outline and hatchings to create shadows and a bit of plasticity. The drawings should feel a bit fuzzy and sketched but still be clear and simplified enough to be readable. Everything should feel mysterious and cute. You can see the spirits on the right.
The important part of the cursor design was creating three different icons for the three different interaction situations: look (or zoom), walk and no interaction. The icons have to be clearly distinguishable from another and should also depict something that gives a hint to its function. For walking to another part of the area I chose an opening door, for looking closely an open eye. The default cursor icon is a little ball. To ensure a pleasant interaction, the center of each icon is located at the exact point of interaction when the click is performed.
Photography
Happy to get my camera out my focus was on taking very zoomed in photographs of all the little details I would find around me at my chosen site where the game takes place. The photos where supposed to be the center piece of the the game, presenting unusual views and beautiful details of nature and objects. I tried to take as many as possible to cover a tight network of traversal between the different views and also assuring that there will be plenty hiding spots for the spirits later. In the end 107 images made it into the game and can be found by the very eager player.
Of course there where a few things I learned with taking photos for a point-and-click game for the first time: First, planning the traversal between the different parts of the site beforehand would make the assembling of the resulting photos to a network much easier. Second, taking photos of consecutive parts of the traversal gets very fuzzy and disorienting, when the point of view is changed too much. To not confuse the player the photos should all be taken in the same direction – or very close to. When backtracking the player can have the experience of walking backwards, but would still not get confused with different angles of the same scene.
cODING
Coding the point-and-click engine from scratch was a big task – much too big for a game jam weekend. Still, i managed to build up a system to traverse between the different views including all planned images into the game during the weekend. Later I finished implementing the remaining functionality of actually collecting the spirits, adjusting some settings (volume and color mode) and including sounds and music.
The point-and-click system is made up of 2 types of objects: the View – containing all the information through a ScriptableObject ViewInfo plus the image itself – and at least one NavigationTrigger to a different View. The following images depict the scene view and hierarchy for an example View:
As you can see below, each NavigationTrigger also has a ViewInfo ScriptableObject, to connect it to the goal View it leads to. When clicking on one of the NavigationTriggers’ colliders, all existing Views in the scene are disabled and the respective View is spawned by a Navigator (which has a list of all possible Views) by looking up the correct View with the ID saved inside the ScriptableObject. When visiting a View that has been visited before, the View is not spawned again but enabled. This system saves loading time in the beginning but also redundant creation of assets that are needed more than one time during gameplay. The communication between the different colliders and scripts is achieved by using event channels. This is also how the correct cursor icon for different types of navigation (walking, looking) is decided and distributed to the cursor logic script.
The main problem of implementing the point-and-click engine was the amount of objects I had to create for each image I wanted to include: 1 NavigationTrigger, 1 View, 1 ViewInfo (ScriptableObject), 1 sprite and 1 NavigationID entrance for each picture. I did this all by hand, which I learned not to repeat for future projects, if things need to be created more than three times for a given project.
Finally I also want to highlight the realization of the overlap between the spirits and parts of the backgrounds, as seen in the image below:
To achieve this I created separate images that filled out the parts of the picture that should cover up the spirit in the final game and added this as SpriteMask to the View. The SpriteRenderer of the Spirit then just needed to be set to visible outside mask and the effect was achieved. The sprite of the mask is not rendered by Unity.
Portfolio of Katharina Broswik 