Please sign in to access this page

Target Shooter

Target Shooter

9 devlogs
96h 33m
•  Ship certified
Created by Abdur Rehman

A 3D web game where you shoot targets to achieve the highest score while being as accurate as possible.

Timeline

Ship 1

0 payouts of shell 0 shells

Abdur Rehman

29 days ago

Abdur Rehman Covers 9 devlogs and 96h 33m

I finally added audio to the game, which has been a major improvement to the gameplay in my opinion. I started by setting up the basic foundation for the audio which is creating a listener and I optionally implemented a simple audio cache to store all the game sounds (just like I was doing with my models). This caching system helps with performance (I think) and makes it easier to reuse sounds later on and just makes it easier to make the loading system. Next, I focused on finding a suitable sound for when the player shoots. After some searching, I found one that sounded pretty good to me. I then moved on to the reload sound. While I’m not completely satisfied with the one I chose, it was the best I could find after a lot of searching. Scoping in/out sounds took even more searching and experimentation. I tested multiple sounds until I found a combination that felt right. Then I worked on the sounds for item drops being collected. After some searching I eventually found ones that worked and added them in. After that, I added audio for when enemies are shot and included a hitmarker sound as well. I might add more sounds in the future, but finding the right audio takes a lot of time, so I’m putting that on hold for now. One of the more immersive features I added is a heartbeat sound that plays when the player’s health is critically low, accompanied by a visual damage effect. It really adds tension to some moments. I also implemented a feature where the game automatically pauses if the player switches to another tab or application. After that, I made various tweaks and finalized some values across the game. Once everything felt polished, I created a README file for the project. That’s pretty much where things stand for now. I might release future updates, like one feature I’d love to add is a leaderboard but honestly, this project has been a long journey. I’m really proud of how it turned out. There are a few areas I could refine, but nothing major. For now, I’m happy with it.

Update attachment

I started by refining the pause and death screens and addressing many UI-related bugs. Once that was dealt with, I decided to enhance the damage feedback by adding a damage effect that plays whenever the player gets damaged (which includes a red overlay and screen shake) because before you couldn't even notice that you were taking any damage). Next, I focused on improving the HUD. I revamped the ammo display thing by playing with its styles until i got something that looked good and replaced the simple health display with a more dynamic circular health bar. To make it look like you were actually gaining health and ammo, I also added effects that trigger when the player picks up health or ammo. I then turned my attention to the death screen. I implemented a death animation where the player's gun drops when health hits zero, with the previous glitch effect that I had but I toned it down because previously it was too extreme. I also made several minor adjustments to polish the overall appearance and added additional ranks for the player to achieve. I also added a warning text that appears whenever the games difficulty level increases so the player can actually see their progress. To balance gameplay, I introduced a static enemy type (which is like an enemy that doesn't move) to provide a break in the challenge. Finally, I'm now working on adding the audio and searching for sound assets to enhance the overall gameplay.

Update attachment

I began by playing with something called tone mapping, but ultimately decided the game looked better without it. With that settled, I finally shifted my focus to the UI. I started by building the loading screen, then implemented pause functionality along with a dedicated pause screen. I also introduced a scoring system to track player performance. Next, I tackled the death screen, adding features like the accuracy the player had throughout the game and giving the player a final rank based on the score and the difficulty level reached, topped off with a cool glitch effect that plays when the game ends. While the UI logic was fairly minimal, the real time taking part was the CSS. I spent a lot of time fine-tuning subtle details and effects to make everything look and feel just right (the animations were annoying as hell to add). Now the UI isn't complete like the HUD looks pretty ugly right now compared to the other stuff so I will spend some time making it look better. After that I'll move on to polishing the experience by adding small features and improvements that elevate gameplay before adding the final major functionality which is audio.

Update attachment

I started off by squashing a whole bunch of bugs, and I also removed the light effect from bullet impacts. It looked cool, but it was causing lag. After that, I dealt with a few more performance related issues, and then moved on to tweaking the spawn rates of the enemies and the drops. Originally, the health and ammo drops would spawn simultaneously, but now the health drop takes longer to appear. This adds more challenge to the gameplay, maybe too much (I might revisit the difficulty settings later). With those changes in place, I turned my attention to the environment. First up I did the sky. I figured creating a sky would also help with creating a suitable lighting. I started by trying to use an HDRI image for the background, but even at 1K resolution, it caused major lag. I tested a few lighter HDRIs, but the result was the same. So I scrapped that idea and went with a skybox instead. I eventually found some suitable skybox textures and built a dedicated SkyBox class to handle all sky related stuff. Unfortunately, performance (while better than the HDRIs) still wasn’t great, and visually it just didn’t work (probably due to low-res textures, but I couldn’t find better ones). So that idea got tossed too. In the end, I decided to use the sky provided by Three.js. After taking a quick look into the docs and doing some quick experimentation, I got it working. At one point, I tried to implement a day/night cycle just because I thought it would look cool and be easy to set up. Turns out, it was neither. Not only did it not work, it also looked kind of awful. That’s when I decided on a static sky. I picked a preset I liked (from my previous experimentation), tweaked it a bunch, and finally got a result I was happy with. Next, I adjusted the lighting by making it bright (way too bright). Then I turned my focus to the map. Up to this point, the ground was just a plain blue block. I looked for shooting range models on Sketchfab and found nothing. I tried searching for shed like structures, but they didn't look good to say the least, and seemed too complex to integrate hitboxes into easily. So I decided to build the map myself. Surprisingly, it was pretty straightforward and actually a lot of fun. I thought adding physics to each prop would be a pain, but that turned out to be easier than expected too. I added a bit of randomness to how some of the props behave to keep things interesting. After that, I toned down the excruciatingly bright lighting, updated the drop spawn points and the possible enemy spawn areas. Now, I'm in the phase of experimenting with different things like tone mapping. Next I will build the UI, add audio, and implement a scoring system as the final cherry on top.

Update attachment

I began by creating the muzzle smoke effect, followed by making the bullet hit effect look better and making it trigger on collision with every object. Once that was working, I turned my attention to the enemies. After some refactoring to the enemy classes, I realized the enemies looked quite dull, and I only had one enemy type. I searched for 3D models but couldn't find anything suitable. So instead of creating multiple enemies with different appearance, I decided to introduce behavioral variety. I implemented eight different movement patterns and now randomly assign one to each enemy. After that I made enemies disappear on their own after a certain period if not shot, also adding a disappear animation. With that in place, I moved on to implementing the player health system, which is a core part to the game loop as it creates the game over condition. Now, if the player fails to shoot an enemy before it disappears, they lose health. When health reaches zero, the game ends and this is where a death screen will be added (for now the game doesn't update when the health is 0). Next, I created a difficulty manager to gradually increase the difficulty over time by adjusting enemy speed, movement duration, and other things. After crushing a few bugs, I worked on health and ammo drops. I found suitable models, created a drop manager to handle their logic, and set them to spawn at regular intervals. With all that complete, the core gameplay loop is now functional, though I might add some other stuff in the future. My next steps include squashing additional bugs I noticed, tweaking difficulty settings, and fine-tuning the spawn rates of drops. Once that's done, I’ll focus on enhancing the visuals by improving the environment and adding visual effects followed by implementing audio and finally building the UI.

Update attachment

I’ve made several improvements to the game. First, I implemented a basic enemy spawning system. Right now, it spawns enemies at fixed intervals with a maximum number of active enemies. In the future, I plan to make the game progressively more difficult by reducing the spawn interval and increasing the maximum number of enemies over time. I’m also planning to make the enemies disappear after a certain duration if they’re not shot. When that happens, the player will lose health. If the health reaches zero, that'll be the point when the game is over. Currently, the enemies (or targets) are static, but I intend to introduce movement patterns such as vertical or sideways motion to make the gameplay more fun because right now it is child's play to hit the targets. I had planned to add multiple enemy types but couldn’t find a suitable model. However, I’ve already set up the system to support multiple enemy types in the future. For now, there’s only one. I’ve also added a shatter animation for when enemies are successfully hit, along with a bullet impact effect and a hitmarker. Additionally, I implemented a spawn animation for enemies using GSAP. At one point, I tried to replace my manual animations with animations using GSAP, but it didn’t go well, so I’ve dumped that idea. I also added a smoke effect, which I used on the bullet impact effect and also plan to use for the muzzle smoke. Next, I’ll be working on adding ammo drops and other small (or possibly large) gameplay features. After that, I’ll focus on improving the visual quality of the entire scene by adding props among other stuff, and eventually, I’ll begin working on the UI.

Update attachment

I adjusted the reload time and added a reload bar that fills up as the weapon reloads, also displaying the remaining time. Then, I refactored the code by creating utility functions, which significantly reduced repetition and made the codebase much cleaner.
Next, I introduced a Shootable class to define all objects that can be shot. All enemies inherit from this class. I also created a Target subclass (a basic enemy type), imported its model, and set it up in the scene. Currently, there is only one enemy type, and its behavior is simple. It only interacts with bullets and has no movement or advanced logic yet. I'm now working on adding more functionality to the enemies, and once that's done, I plan to implement multiple enemy types with varying behaviors.

Update attachment

I started by tweaking the gun movements and adding recoil to improve the overall feel. After that, I noticed the bullets didn’t look great, so I redesigned them with a better appearance and added trail effects for better visuals. I also fixed an issue where bullets would rotate wildly upon hitting the ground and now they bounce off smoothly. Next, I implemented scoping/zoom functionality and built a reload system for the gun along with some simple reloading based UI (which is subject to change). I also created a crosshair and added animations to it. Currently, I'm still working on refining the reload mechanics and will start on making the enemies.

Update attachment

I started by setting up a basic Three.js scene. Then I added Cannon.js and experimented with it for a while before deciding to make a shooting game. After that, I refactored the entire codebase to use classes, since I find them easier to work with. I then created the player, found a model for it, added its basic functionality, and spent some time tweaking things to make it feel right. I also implemented bullets and created a class to handle all input. Now, while continuing to work on the other aspects of the game, I'm also thinking of a fitting name for this game (because Shooting Game doesn't sound like such a good title, now does it?).

Update attachment