Tag Archives: hud

Exploration Gameplay Basics (3 Videos)

Gameplay progression #1

I’ve added a lot to this from the last time we’ve seen progress! And I’ve included 2 more videos to show subsequent updates without spamming posts on my website. I’m also now adding bold titles to each paragraph to help people see the updates I’ve made in each post and keep it all looking nice and clean.

The HUD: The video above (progression #1) features a slightly updated HUD, but still non-functional attributes. But it’s one step closer to be hooked up and working.

The Flashlight: Has officially been updated to a more realistic lighting effect via the Volumetric Light Beam asset, which allows for dynamic occluders like walls and other object. I’m still having a couple issues with the light clipping through certain areas when the player gets too close to an object, but I will continue to work on this. I also managed to get the “look around” function working with the flashlight, which is triggered by holding the right mouse button and moving the mouse around. This rotates the character, effectively allowing you to look around with the flashlight with or without moving.

The Inventory UI: Thanks to another amazing tutorial by MiTschMr, whom I will also reference later (and provide a link to), I managed to get a “description window” working for the Inventory system, which was a little more complicated than I thought it would be, but with his help I managed to get it working with some script additions. This just shows the description added for the item in the Inventory panel (in Unity, not the game) in an area of the Inventory background instead of on hover or click.

BGM/SFX: I’ve added BGM and extra sound effects to the ambiance. Nothing super special about this, just some added looping files with randomized SFX again like I spoke about before.

Interaction Notifications: I added interaction notifications to the HUD above the players avatar to show what you are able to interact with when you press E. This was made by creating a separate canvas for text/icon objects that are set active/inactive by entering certain areas around the map (in front of doors, etc). I was able to extend this to displaying multiple interactions at once by creating a vertical alignment group and ensuring all the objects sat in this content container. The result was something akin to what you would see when you can interact with multiple objects at once in games like Genshin Impact. This is NOT illustrated in any of the videos, however. This is a function that has been removed in newer versions and is in the process of being replaced with a better and less intrusive HUD system.

Perception Ability: I made a [lazy] sonar system for use with the Perception stat and subsequent “Investigate” skill. It basically produces a “radar” around the character (distance is determined by skill level) that highlights interactable objects. The visuals for this are just a placeholder; gladly, considering how ugly it is. But it works! Will of course be updated in the near future.

Key Item Usage: This is actually my SECOND attempt at a “key items” system in this game. That is, items you need to do something, usually to progress within an area, like a specific key to open a door. I wanted to design this like Silent Hill and Resident Evil had, but I had no idea how to make any sort of “context menu” for using items within the inventory. So for the first version, I simply allowed for the player to find an item, pick it up, and then the character would automatically use it from their inventory when pressing E at the appropriate door. Kinda boring, huh? I thought so too. And far too easy. Thankfully, a kind developer known online as MiTschMR created a context menu extension for Game Creator, which was the first major step in achieving what I wanted. By following the tutorials on his website as well as some one-on-one discussion, I managed to tweak a lot of elements of the default Inventory system to my needs, including an “Examine” function which is not functioning yet in this first video but is listed; implemented in video #2). The first video here doesn’t show a “use” option just yet, either, but I do manage to integrate that a short time later (video #3).

Roofs: You’ll also notice there are no roofs on the buildings and you can see inside them. Also no fun, and no spook value at all. When you can see what’s on the other side of the wall, it’s certainly not as scary. At least not usually. I also took care of this issue in the future as well. I could have simply made a “darkness mask” like I plan on doing to the environments later, but a more realistic solution came to mind and it ended up working well, as you’ll see in the last video.

Gameplay progression #2

Not much has changed here but some visual things:

The Examine function: Finally working as of now. Thanks to MiTshMRs tutorials, I was able to add my own custom listing to Game Creators Inventory system and a new button to the context menu to trigger a reading of that listing. Has a simple visual effect for now but it’s working which is great!

The Doors: Not the band 😛 I replaced the door models with models of my own; my first time using ProBuilder for something somewhat detailed. I make a more detailed version of these doors for the motel in the future. As of this video the doors are not rigged or animated so they do not open. It always feels nice to replace prototype models with your own, though!

Gameplay progression #3

This is the 3rd and most recent iteration of this gameplay. Still incomplete, of course, but at this point a lot of basic (and some less basic) functions have been completed.

The Environment: I added windows to the mart building as well as, yes, a roof! With a fun dissolve effect upon entry. I thought this would be more visually interesting and realistic than simply adding the darkness mask I mentioned earlier. It allows me to add things possibly viewable on rooftops like clues, creatures, signs, etc.

The Perception Ability: I replaced the original “perception radar” with another more fluid looking version, courtesy of a wonderful little asset called Simple Sonar Shader!

The “Use” Function: Yes, I finally did it! It was more of a pain in the ass than you would think, because the way I had to set it up (I will be looking at alternatives in the future just to keep things clean under the hood) was using a Global Variable, which I will basically have to make for each “key” use area. Basically what happens is when you press “use” the game checks whether or not you’re in the right trigger zone. If you aren’t, the character will say “I can’t use that here”. But if you are, the item activates (usually deleting the item from your inventory) and the area becomes unlocked. I will be continuing to play with this idea in the future and am hoping on making a tutorial of it at some point!

The first video was recorded on January 4 2021, the second on January 10 2021 and the third on January 18 2021.

Basic Inventory System (Flashlight)

Basic inventory/container system

I made a few minor adjustments to the HUD here, but nothing is functional yet; it wasn’t my main focus.

I made a custom skin (still a very much a WIP) for Game Creator’s Inventory system (had not made one for “containers” as of yet) and managed to get the flashlight object I had made as a working equippable. This was actually quite a complicated little thing to do.
The flashlight I created was saved as a prefab, and was not yet instantiated into the game at the beginning. Once you equip the flashlight, it instantiates the flashlight prefab as a child of the player object (so it will move with the player). This took some really specific placement modifications too for the instantiated object to be facing the right direction, especially when the player was facing a direction other than toward the camera. When they weren’t, the flashlight would instantiate at a weird rotation, so it wouldn’t necessarily be in front of the player. I remedied this by zeroing out the Flashlight prefabs rotations to 0, and putting the actions in this order:

  • 1. Instantiate the Flashlight and store it in a Global Variable (“EquippedFlashlight”)
  • 2. Change Parent of Global Variable “EquippedFlashlight” to Global Variable “CurrentPlayer”
  • 3. Change Position (aka Move) of Global Variable “EquippedFlashlight” to [my specified coordinates for X,Y, and Z; these coordinates will change in the future when I have actual sprites but for now the tweaks to this position make it look like it’s in their right hand)

So, for now at least, the basic Flashlight functions were taken care of. As I noted above, this situation will more than likely change when I start using actual sprites, but for testing, it’s all good!

You’ll also see that I added organization tabs for the inventory at the top of the menu (which will also be changed in the future, but practice practice practice).

Also in the future, the Flashlight will be a left-handed item, as left-hand items will be supporting items and right-hand will be weapons. This will play a part in the mechanics, and makes the sprites a little more fluid and “realistic” (usually you can “mirror” sprites but that swaps things around and makes the imagery inconsistent, so I’m making sure to keep things organized).

This video was recorded on December 26, 2020.

Road to Motel Basics

The HUD featured here was a placeholder only; non-functional. The flashlight implemented in this also had no inventory mechanic whatsoever, rather it was just a lighting effect place onto the character that could be switched on and off. An inventory system had yet to be created. You can see how jittery it is, as it’s moving purely with the characters movement; you can’t move it independently. I changed this in the future!

The dialogue (also called”barks”, which are essentially character shouts) were created using the Game Creator “floating messages” system, which I gave my own custom skin to make them appear as comic-style speech bubbles to tie in with the games eventual graphics style. In this scene, they appear when the player reaches an area boundary, and will be utilized much more in the future.

The floating text was left over from my practice getting text to always face the camera, and appear when the player was near enough to it. In the same vein, the arrow on the ground was made and animated by me for practice and study. Neither will be used in any final version.

The loading screen used here was via a custom script I did a lot of research on (actually a group of 3 scripts), which has a moving status bar displaying a percentage while it loads/unloads the scenes it’s told to.

This is not visible in the video, but “under the hood”, I will note that this is far before I got the actual Game Creator movement script working with SpriteMan3D. I am actually using the custom simple character controller here that came with the SpriteMan3D asset. It is very simple, only walk and run animations (run being triggered by holding the Left Shift key, standard movement being WSAD). The flashlight button was “F” and simply turned the flashlight geometry to active or inactive.

This video was recorded Dec 11, 2020