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.
<\/p>\n\n\n\n
<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<\/p>\n\n\n\n
# Camera map panel\n self.map_panel = pygame.Rect(520, 520, 260, 260)\n\n # Camera nodes (FNaF-style layout)\n self.map_boxes = {\n \"CAM 1\": pygame.Rect(560, 560, 70, 35),\n \"CAM 2\": pygame.Rect(640, 560, 70, 35),\n \"CAM 3\": pygame.Rect(560, 610, 70, 35),\n \"CAM 4\": pygame.Rect(640, 610, 70, 35),\n \"CAM 5\": pygame.Rect(560, 660, 70, 35),\n \"CAM 6\": pygame.Rect(640, 660, 70, 35),\n }<\/code><\/pre>\n\n\n\nWithin 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
<\/p>\n\n\n\n
\n # Static overlay\n self.static_surface = pygame.Surface((800, 800))\n self.static_surface.set_alpha(80)\n self.generate_static()\n\n # Glitch flash\n self.glitch_surface = pygame.Surface((800, 800))\n self.glitch_surface.fill((255, 255, 255))\n self.glitch_surface.set_alpha(0)\n self.glitch_timer = 0\n\n # Camera switching animation\n self.switch_anim = 0 # 0 = no animation, >0 = frames left\n self.switch_flash_alpha = 0 # white flash intensity\n self.switch_static_alpha = 0 # static spike intensity\n<\/code><\/pre>\n\n\n\nWhen switching cameras, the screen briefly goes white, then goes anyway once the animation is done.<\/p>\n\n\n\n
Also, to generate the static, I used the random import to make it seem realistic to real static.
<\/p>\n\n\n\n
def generate_static(self):\n \"\"\"Creates grainy static for the camera feed.\"\"\"\n for x in range(0, 800, 4):\n for y in range(0, 800, 4):\n shade = random.randint(0, 80)\n pygame.draw.rect(self.static_surface, (shade, shade, shade), (x, y, 4, 4))<\/code><\/pre>\n\n\n\neach 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
So, to start off, I’m working on a fnaf game call Five Nights In Atlanta, with a bunch of influencers […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts\/46\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}