So, to start off, I’m working on a fnaf game call Five Nights In Atlanta, with a bunch of influencers as the animatronics.
However, i’m primarily working on the U.I and functions of the game, like cameras, Office function, and rooms.
But i’ll be making this about the camera UI, since that’s what I worked on today.
Firstly, I wanted to add the camera map panel that fnaf 1 has, so that way it has a much more interesting feel than just a bunch of buttons.
Also, keep in mind I used A.I to help me organize and expand, I typed most of these things out.
# Camera map panel
self.map_panel = pygame.Rect(520, 520, 260, 260)
# Camera nodes (FNaF-style layout)
self.map_boxes = {
"CAM 1": pygame.Rect(560, 560, 70, 35),
"CAM 2": pygame.Rect(640, 560, 70, 35),
"CAM 3": pygame.Rect(560, 610, 70, 35),
"CAM 4": pygame.Rect(640, 610, 70, 35),
"CAM 5": pygame.Rect(560, 660, 70, 35),
"CAM 6": pygame.Rect(640, 660, 70, 35),
}
Within this block of code, I added The camera map panel, then the nodes for each camera
Each one of the camera’s buttons hitboxes were also tweaked, so it fits the nodes well.
with that, i needed to style the camera’s to make it looks like you’re ACTUALLY through the cams, so I added static overlay, glitches, and a camera switching animation
# Static overlay
self.static_surface = pygame.Surface((800, 800))
self.static_surface.set_alpha(80)
self.generate_static()
# Glitch flash
self.glitch_surface = pygame.Surface((800, 800))
self.glitch_surface.fill((255, 255, 255))
self.glitch_surface.set_alpha(0)
self.glitch_timer = 0
# Camera switching animation
self.switch_anim = 0 # 0 = no animation, >0 = frames left
self.switch_flash_alpha = 0 # white flash intensity
self.switch_static_alpha = 0 # static spike intensity
When switching cameras, the screen briefly goes white, then goes anyway once the animation is done.
Also, to generate the static, I used the random import to make it seem realistic to real static.
def generate_static(self):
"""Creates grainy static for the camera feed."""
for x in range(0, 800, 4):
for y in range(0, 800, 4):
shade = random.randint(0, 80)
pygame.draw.rect(self.static_surface, (shade, shade, shade), (x, y, 4, 4))
each piece of static is also randomly generated pixels changing, so it give the feel of static, y’know?
But yeah, thats pretty much what I worked on.