{"author_link":"\/users\/cardboard-box","author_name":"Cardboard Box","author_uid":"cardboard-box","comments":[],"epoch":1745656996,"event":"LD57","format":"md","ldjam_node_id":415347,"likes":37,"metadata":{"p_key":"211639","p_author":"Cardboard Box","p_authorkey":"1075284","p_urlkey":"451466","p_title":"How we draw the giant enemy spider!","p_cat":"LDJam ","p_event":"LD57","p_time":"1745656996","p_likes":"37","p_comments":"0","p_status":"WAYBACK","us_key":"1075284","us_name":"Cardboard Box","us_username":"cardboard-box","event_start":"1743811200","event_key":"111","event_name":"Ludum Dare 57"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD57","removed_author":false},"_superparent":406845,"_trust":1,"author":75284,"body":"I've seen some commenters point out the giant enemy spider in the room. Let me explain how we draw it!\n\n![merge_0.gif](\/\/\/raw\/416\/21\/z\/6c7e6.gif)\n\nFirst things first, I'll explain something about the game itself.\n\nOur game is made for the awesome [PICO-8 fantasy console!](https:\/\/www.lexaloffle.com\/pico-8.php) Because of that, we have to do all the everything ourselves, just like on actual retro game consoles.\n\nSo, there are two parts to this. First, we need to figure out how the legs move.\n\nThe legs have two joints: one at the spider's body and one knee, as such each leg is defined as two lines: from the body to the knee, and from the knee to the tip.\n\nThe body is a static point, the knee rotates around a point, and the tip rotates around a point, \"left\" legs rotating counter-clockwise and \"right\" legs rotating clockwise. We draw lines between those joints and boom! Leg.\n\n![spiderbro_0.gif](\/\/\/raw\/416\/21\/z\/6c7e4.gif)\n\nThen we need to actually draw the cool stuff.\n\n![spiderbro_1.gif](\/\/\/raw\/416\/21\/z\/6c7e3.gif)\n\nThe spider is drawn from outline to fill, with some overdraw on the outline so there aren't any gaps. Since PICO-8 doesn't have a \"thick line\" builtin, we have to improvise and do the thick lines ourselves. \n\nThe fangs, as well as the pattern on it's back, are sprites, and the eye is a pair of circles.\n\nFor some PICO-8 specific stuff:\n\nTo draw the black outline on a sprite, we use `pal(15, 0)` to replace color 15 with a non-transparent color 0, giving us a black color that is distinct from the \"background\" color. You can actually spot it on a few other sprites, as well as a full \"non-transparent black\" tile.\n![spiderbro_1.png](\/\/\/raw\/416\/21\/z\/6c7e5.png)\n\nFor the checkerboard pixel fill, a special function exists in PICO-8 for setting a 4x4 fill pattern, using a number in which bits denote which pixel would use primary or secondary color. We use it like this:\n\n```lua\nfillp(0b1010010110100101)\n-- Let's cut it up to make it more clear. Mind that numbers don't actually work like this!\nfillp(0b\n1010\n0101\n1010\n0101)\n```\n\nFor flashing effects, we just pick a color and randomize it with `pal(c, 1+flr(rnd(14)))`\n\nThe game is here, play it! https:\/\/ldjam.com\/events\/ludum-dare\/57\/spider-cave-offensive\n\n","comments":1,"comments-timestamp":"2025-04-26T11:28:36Z","created":"2025-04-26T08:20:23Z","files":[],"files-timestamp":0,"id":415347,"love":37,"love-timestamp":"2025-04-26T17:06:16Z","meta":[],"modified":"2025-04-26T17:06:16Z","name":"How we draw the giant enemy spider!","node-timestamp":"2025-04-26T08:59:14Z","parent":413344,"parents":[1,5,9,406845,413344],"path":"\/events\/ludum-dare\/57\/spider-cave-offensive\/how-we-draw-the-giant-enemy-spider","published":"2025-04-26T08:43:16Z","scope":"public","slug":"how-we-draw-the-giant-enemy-spider","subsubtype":"","subtype":"","type":"post","version":1312421},"node_metadata":{"n_key":"415347","n_urlkey":"451466","n_parent":"413344","n_path":"\/events\/ludum-dare\/57\/spider-cave-offensive\/how-we-draw-the-giant-enemy-spider","n_slug":"how-we-draw-the-giant-enemy-spid","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"75284","n_created":"1745655623","n_modified":"1745687176","n_version":"1312421","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/57\/spider-cave-offensive\/how-we-draw-the-giant-enemy-spider","text":"I've seen some commenters point out the giant enemy spider in the room. Let me explain how we draw it!\n\n![merge_0.gif](\/\/\/raw\/416\/21\/z\/6c7e6.gif)\n\nFirst things first, I'll explain something about the game itself.\n\nOur game is made for the awesome [PICO-8 fantasy console!](https:\/\/www.lexaloffle.com\/pico-8.php) Because of that, we have to do all the everything ourselves, just like on actual retro game consoles.\n\nSo, there are two parts to this. First, we need to figure out how the legs move.\n\nThe legs have two joints: one at the spider's body and one knee, as such each leg is defined as two lines: from the body to the knee, and from the knee to the tip.\n\nThe body is a static point, the knee rotates around a point, and the tip rotates around a point, \"left\" legs rotating counter-clockwise and \"right\" legs rotating clockwise. We draw lines between those joints and boom! Leg.\n\n![spiderbro_0.gif](\/\/\/raw\/416\/21\/z\/6c7e4.gif)\n\nThen we need to actually draw the cool stuff.\n\n![spiderbro_1.gif](\/\/\/raw\/416\/21\/z\/6c7e3.gif)\n\nThe spider is drawn from outline to fill, with some overdraw on the outline so there aren't any gaps. Since PICO-8 doesn't have a \"thick line\" builtin, we have to improvise and do the thick lines ourselves. \n\nThe fangs, as well as the pattern on it's back, are sprites, and the eye is a pair of circles.\n\nFor some PICO-8 specific stuff:\n\nTo draw the black outline on a sprite, we use `pal(15, 0)` to replace color 15 with a non-transparent color 0, giving us a black color that is distinct from the \"background\" color. You can actually spot it on a few other sprites, as well as a full \"non-transparent black\" tile.\n![spiderbro_1.png](\/\/\/raw\/416\/21\/z\/6c7e5.png)\n\nFor the checkerboard pixel fill, a special function exists in PICO-8 for setting a 4x4 fill pattern, using a number in which bits denote which pixel would use primary or secondary color. We use it like this:\n\n```lua\nfillp(0b1010010110100101)\n-- Let's cut it up to make it more clear. Mind that numbers don't actually work like this!\nfillp(0b\n1010\n0101\n1010\n0101)\n```\n\nFor flashing effects, we just pick a color and randomize it with `pal(c, 1+flr(rnd(14)))`\n\nThe game is here, play it! https:\/\/ldjam.com\/events\/ludum-dare\/57\/spider-cave-offensive\n\n","title":"How we draw the giant enemy spider!","wayback_source":[]}