Experimentation

Lighting Effects and Techniques

For my first practical technique I will be experimenting with two different methods of adding lighting effects to my game in Construct 3 to enhance the horror experience that I want to portray. The first method that I will be experimenting with will be focusing mainly on adding a global static light effect to the main playable character that follows the player as they move around the map. This first method will solely rely on one single line of code making it efficient and easy to add after building the core gameplay. The second method that I will be experimenting with will include the same ideals as the first method except this method will allow me to add light sources and flickering effects to many of the assets that I want to emit light, in addition this method will ultimately allow me to toggle the light sources on or off depending on the environment, level and map.

Method 1 - Bailey Light Effects

This first method of implementing light effects into Construct 3 comes from my contextual research report. A video of my process can be found below, as well as a playable version of the experiment Construct 3 method.

After experimenting with this first method of implementing lighting effects I found that the static light worked extremely well with the horror theme that I wanted to portray, however I feel that the lighting effect seemed very lifeless. By this I mean that the light does not move or flicker like a light in real life, in addition, I feel that a light source coming from the player does not really fit with what I want to portray and I feel that light sources such as torches and lights would work better with my horror themed game. Overall, this first method was extremely basic and was easy to implement, however as mentioned above I feel that the lighting effects seemed bland, lifeless and not up to the standard that I want to add to my game.

Method 2 - Xanderwood Light Effects

The second method that I experimented with was the Xanderwood YouTube method that I found when researching this Construct 3 effect in my Contextual Research Report, this method like the previous method relies solely on pinning the light sources to their emitters, for example a light effect has been pinned to the character as well as the torch sprite that I have created within this experiment. The only major difference between this method and the previous method is that I am able to pin my light to different objects as well as adding flicker effects for a more realistic effect. A video process and also a playable version of my experiment can be found below.

After experimenting with the second method presented by Xanderwood I found that this method was more streamlined, straightforward and produced a more realistic result compared to the first method that I experimented with above. Xanderwoods method allowed me to pin light to different sprites on the Construct 3 experiment game and this is something that I would definitely want to utilise when it comes to implementing light effects into my puzzles and levels. The flickering effects were also something that I wanted to achieve and this was not possible in the first experiment method so this second method allowed me to have more control over the utilisation of the lighting effects. Furthermore, I found that this method allowed me to toggle the lightsource on and off when entering and exciting light and dark environments, this is also a great feature and I felt that this would be utilised in all of my levels to allow for a variety of environments.

After experimenting and testing the two methods of implementing lighting effects into Construct 3 I found that the second method that I experimented with trumped the first method by miles and this is mostly because of the larger amount of control over the different effects and behaviours that I can use to create realistic and immersive environments using these lighting techniques. In addition, the second method allowed for me to add flickering effects as well as different colour maps and gradients, this is something that the first method did not allow for a I had to use a png file for the light effect in the first method whereas with the second on I was able to use the paint tool within Construct 3. So overall, I will be adopting the second method of lighting techniques because I feel that I will be able to create the effects that match the quality and immersion that I feel need to be implemented into my game. I intend to utilise the lighting techniques to create shadow puzzles and also immersive elements within my game.

Water Reflections / Shadows

For my second practical technique I will be experimenting with water effects, reflections and shadows. These water effects and reflections will allow me to create the immersive effect that I want to achieve and also I will be able to utilise the water effects into my puzzles creating reflection puzzles that will spell out clues. The first method that I will be experimenting with came from my research report and this method was taken from Game Design with Reilly from YouTube. This method will allow me to add a water effect background whilst also generating a collection of reflections or shadows based upon the location of the sprites in accordance to the water source, this will allow me to create a moving effect on the reflections when the player moves adding to the immersion further. The second method that I will experiment with came from a Construct Forum post and I also researched this technique in my research report. This method achieves the reflections and water effects differently, this time all assets are reflected and the water effect is added to the sprites as well as the background.

Method 1 - Game Design with Reilly Water Reflections

The first method of practical experimentation in terms of water reflections and effects was the YouTube guide that I followed. This method was an easy step by step guide that streamlined the process of implementing these effects and was able to easily pick up all of the steps. A video process can be found below as well as an interactable experiment.

After experimenting with the first method of adding and utilising water effects and reflections I found this method to be very easy to follow and also great at creating a realistic effect. As you can see within the video as well as the interactable experiment app we can see that the water looked very realistic and achieved high quality and relative reflections. This means that I will be able to create realistic effects if I choose this method for my main game. In addition to this, I am able to add new copies of my sprites when I feel like it because the reflections are not manually added in instead they are generated depending on certain conditions, booleans and variables are met. This would also come in handy if I want to change the layout of my levels that incorporate this effect as I would not have to move every single asset as well as the reflection because the reflections would automatically adjust to the movement.

Method 2 - Lamar Water reflections - Construct Forum

The second method that I experimented with was the method taken from the Construct community forum that I researched into in the research report, this method unlike the previous one involved me manually generating reflections, this was a significant drawback to this method. A video process as well as interactive experiment build can be found below.

After experimenting with the second method I found one large drawback that was not present in the first method and this was I am unable to move sprites around without having to also move the reflections; this was because the method did not allow for procedural generation like the first method did. In addition the level of detail that I want to achieve for my game would not match the result of this method as the whole background added the water ripple effect to the layer and this would make my life even harder when trying to build the levels within the game.

In conclusion, after practically experimenting with these two methods of water effects and reflections I found that one method stood out the most and this was the first method, this stood out the most to me because it allowed me to move and add sprites as I felt because of procedural generation that was added to the code, this would make my life easier compared to the second method. Also, the first method would fit perfectly with the atmosphere of my horror game because I want to aim for true immersion and the ripple effect from the result of this method worked better than that of the second method. So I will be utilising the first method instead of the second method because of the aforementioned points.

Inventory Systems

For my third set of technique experimentation, I wanted to look into two different methods of implementing an inventory system into my game and this system would be used for when the player picks up interactive items and uses them throughout the many puzzles that will be present in the game. The first method that I will experiment with will be taken from my contextual research report and this will be taken from a guided YouTube video that I will follow throughout the experiment to understand how the system works and how I can successfully implement it. The second method that I will experiment with and showcase below will be taken from a Construct 3 forum and this forum will act as a guide for me as I have found that this method involves a lot of coding and tinkering to be able to fully work. Both of these methods will be attached below, as well as videos going through the processes I went through during the experimentation.

Method 1 - Winstreak Inventory - YouTube guide

As I previously stated, the first method that I experimented with was the YouTube guide presented by Winstreak, this method involved a little amount of coding and was very simple to implement. In addition the method was very effective in adding an inventory system.

After experimenting with the first method, I found that it was extremely easy to implement also I found that it was easy to adapt the system to fit the needs of my game theming, this is something that I find will be necessary when it comes to fully implementing my User Interfaces and Graphical User Interfaces into my horror game. Furthermore, I really liked this inventory system because I was able to change how the player interacts with it, for example the guide showed the player using the muse to interact with the items and adding them to the inventory however I managed to tweak the code and have the player walk to the item and then add it to their inventory. Overall, this method is extremely simple and yet effective. I will be able to change multiple graphical elements of the system to better suit my theming and genre and so I feel that this method would be best, however I will also look into my second method and compare it from there.

Method 2 - Construct Forum - Inventory

The second method that I experimented with was an extremely complicated system of implementing an inventory system that cross referenced and cross checks local .json files continuously as the player picks up more items around the map. Unlike the first method, this method relied heavily on a lot of coding and I feel that this method was more extensive than the previous method. You can see below that this took a very long time to complete and I had to keep referring back to the guide to fully understand how to code this method.

After experimenting with this method, I found that this was extremely difficult to implement and I feel that this method was too focused on coding than creating a useful interactive inventory system, the first method was very simple and the system was very interactive. This second method I felt was very hard to understand and feel that it is too complicated for me to implement into my game because in total it took up over a hundred lines of code and this is time that I do not have to be spending on creating an inventory system, instead I want to spend the most time on creating a well planned and polished user experience and gameplay experience. I was unable to fully implement this method into an interactive experiment because of the amount of computer processing that would have been required to run this Construct 3 application over Netlify. However a video of me going through the finished system can be seen above. To streamline this experiment I reused the item assets from the forum page, however the code that I used and the designs of the actual inventory were adjusted so the inventory system looked different to that of the guide.

In conclusion, by comparing both methods that I have experimented with I have decided that I will not be using the second method because as I stated before it was very time intensive and a game does not focus a large amount of time on inventory systems, instead game developers focus on gameplay and polishing the gameplay experience. In addition to this, I will be adopting the first method because I felt that it was extremely flexible and I will be able to change the design of the UI for my game so it fits better with the theme of my horror puzzle game.

Pixel Art - Shading - Extended Research & Experimentation

The very last practical methods that I wanted to research further into were pixel art shading and dithering techniques, I felt that the primary research that I had gathered in my contextual research report was perfect and I am really grateful for the people who contacted me back however I feel that to be able to fully understand the theories and techniques that were presented to me, I must carry out extended research into the methods and how to physically apply them to my art so I have a greater understanding of what methods practically work best. Although I came to a brief conclusion in my research report about not using a dithering method, I thought that extended research was needed to fully compare the techniques to gather a greater understanding of the methods so I can come up with a more detailed review of the methods researched into. The first method of shading that I want to research further and experiment with is dithering, dithering has been defined as “alternating pixels [...] it tricks your eyes that it is shaded”(FatbeardDraws, 2024), now dithering is simply where I take two colours and create a chequered pattern that smooths out as the object moves to the edges of the canvas, this creates a nice smooth and defined shadow when viewing the pixel art from afar.

The first source that I looked at was a source presented to me by one of my primary research interviewees, Sanjeetha - Pixelartist (2024) “There are plenty of tutorials on Lospec”. On Lospec, I searched through the many pages and tutorials available and came across a very helpful video guide that explained clearly how to achieve the dithering shading effect, the source I came across explained how to achieve different types of shading more specifically on spheres, however the technique can be applied to almost any pixel art. Lospec and Royal Den Studios (2017), says “Essentially what you do is shade using patterns [...] then you kind of soften up the pattern as you go on [...] but then it [...] diminishes”, so going from the very first explanation of dithering I found that it seems to be a very simple method at achieving a basic yet effective shade and I think that this basic shade would work really well for the smaller pixel art assets that I will have to design moving into the Beta build.

Lospec and Royal Den Studios (2017) then go on to state that “this is good for blending colours together without actually having to create another colour”, this is great for creating a consistent shade and I think that the assets in my game would look brilliant with a limited colour palette as Streets of Shadows will be of a horror theme so to be able to elevate the horror theme then I will not want to go overboard with the detail in the assets used, so a simple shade and shadow would work great with my game. In addition to this, FatbeardDraws (2024) has also presented this to me by saying “blends them together without using a third color”, this backs up the statement in my secondary source and further highlights that a simple colour palette is sometimes excellent for creating effective shades. By looking at the tutorial on Lospec I have been able to gather an idea of what dithering entails and the only way to fully understand how to utilise this is by carrying out experimentation, so below I have attached my experimentation of me creating a dithering shade on a basic circle.

After experimenting with a dithering shade, I have found that it is quite tricky at first to understand where to apply the dithering effect, however after adding the shade it creates a really effective shade that adds depth to the assets especially when viewed at the correct scale. I will definitely be using this dithering shade technique when it comes to designing my assets for the Beta Build of my outcome, this method will work best on the smaller assets and so I will be applying this to the assets less than 32 x 32 pixels this will include all of the interactive assets in Streets Of Shadows.

The next shading technique that was brought to my attention was hue shifting, hue shifting can be applied to any shade but it adds an extra layer of depth and highlights the contrasting shaded areas on many assets. It works by adjusting the hue of the main colour and pushing it brighter (towards yellow on the hue scale) for the more open light reflective areas of the art and then pushing the colour darker (away from the yellow side of the hue scale) for the darker, shadow parts of the art. Hue shifting is excellent for creating exaggerated shadows and works in tandem with many different shade types, so if I am to apply this method to my artwork I can use it along with the dithering technique researched above. Yet again, FatbeardDraws (2024) states that “The most direct light source that you can draw in extremely light yellow, or white even. For the shadowy part, you can pick a more orangey yellow, orangey red [...] this makes the lemon more interesting and many artists opt for this method”, as we can see here they have explained the main technique of hue shifting and in terms of how the method works I have found that the lighter colour is used for the lighter area then the darker hue for the shadow parts of the art.

When comparing this to a secondary guide that I found, Panic’s Blog (2021) says “Hue shifting is a technique used in art when picking colors for shading. -Basically, when you make a color darker, you’d make it bluer and more saturated. -When you make a lighter color, you’d make it yellower and less saturated.”, this matches up with what has been said by my primary source so this further shows their knowledge on the subject, and also moving into the practical guide on this blog I found a clear and concise visual on how to effectively achieve a hue shift.

(Panic’s Blog, 2021) “The donut on the left has no hue shifting. When I made a color darker, I just decreased the luminosity. The donut on the right has hue shifting.”

(Panic’s Blog, 2021)

As we can see there is a clear vibrance to the art using a hue shift and this is excellent at creating the depth needed in the assets, this matches to what was said by my primary research. To be able to effectively understand hue shifting I must carry out experimentation into this shading technique.

After experimenting with this technique I found it a lot harder to achieve than any previous shading technique that I have used, however I now have a greater understanding of this method and I would definitely use this technique in the Beta Build of my assets and use it alongside the other techniques of shading as well.

Overall, this extended research and experimentation has helped me to get a greater understanding of the methods and how to apply them and moving forward I will adopt both of these methods thanks to the extra research and practical application. I will apply all of this new knowledge to the pixel art assets in my outcome to add extra depth to my art that I feel the game would really benefit from.

Bibliography