Name: Tiny Game Live Coding Workshop
Uploaded: 2023-10-03T14:00:00.000Z
Duration: 1 h 55 min 5 s
Description: Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.

That's kind of weird. The 3 is supposed to be half of what it actually is. right I don't know it feels like these values seem like they're like not spread out very well if that makes sense equals 100. What if I guess that's right? I just happen to be staggered, I guess. Does this even need to be two pi? I don't think so. I think I could just throw whatever I want in there. I think I could just, do we need C? I don't think we need the C either. We don't need any of that. Oh, that's why it was staggered, right? Because I didn't put A in here instead of put, so now that's why it was like that. That makes sense. But that's 100. it wrapping around which is 200 300 I can also chop my height in half and then we'll just we'll just double that and we'll just make these a little bit higher I'll make this a little wider to cover the gap to there we go same trick to do the top part on darker does not work here because that was just the old thing here but the inside darker I was just doing the ring around the top not the actual on that the full deal um okay so we've got we've got drawing a tiny Rex tiny little Rex instead of set of ellipses which means I could do something like This is a Y, the cosine. A could affect the brain, I think, I don't see what happens. One of the things I love about this type of program is you could just try things on and see what happens. It's like not that big of a deal. I think it worked, just need to renormalize this a little bit. And we'll combine this. This is kind of slow right now, actually, because the combination of these two loops is quite a bit. So the reason I wanted to do this, split up those loops in the first place, is so I could do something like this. So I might like, what can I do, show some kind of have some kind of interesting value in here like that. I don't know if this is going to be enough to see anything. We'll have to make these values a bit bigger. If we can see like a simple pattern here. I don't know how much I like that, but it's something. any. Yeah, yeah. Let's take that lightness part. Let's put that into the do part and let's see if there may be. Some more interesting, that's a bit better. OK. That's going along, it's coming along. It's not too bad. There's something we just threw together and. In about 20 minutes. It's not too bad. Hit this up again. Running super slow though. Okay, well, that's a good start to our talk. What else can we do?Let's take a look at what's on Twitter. Right now, maybe we'll get inspired by an idea, something to do. We got some fractal stuff. Some trees, I could show you how to do a tree. I've seen a lot of this remixes of the same fractal. We can be, we will play around with that for a minute. So a little drawing tool someone made that's kind of cool. Let's grab this fractal. That's cool. This looks kind of interesting. What usually we'll do is open it up in here. Okay, so we're saved up there.

It's got a lot of detail to it. It's got a lot of detail to it! It's very cool. So this color...this black and blue thing is just coming from there. I could also <a href="/tags/performance">speed up</a> the rendering speed a little bit... So what's going on here? Some weird stuff... Let's poke around some values and see what happens.All right. This seems to respond well, okay. There. You should be growing and changing. Oh, that was kind of cool. this one. Some of these changes seem to make it just disappear entirely. I wonder why. gets off screen? Plus I mean, it's just a cosine. It is going off screen. It could be this because this number gets bigger. Oh, it's kind of dimmer too. that's pretty cool how simple it is. Then you've just got the fill direct right there. So it's got an A plus B and a B. I assign a cosine. Interesting stuff. And A and a B and a B back into it. Okay. It's gone.Okay. So, cheese, I'm thinking I don't know. I don't know. Is there any questions or anything in the chat? I see nothing in the chat, so I have no idea what people are interested in seeing. Maybe let's make some small game, something interactive. Interactive? Yeah. Oh, thank you. Someone just suggested a interactive game. I think I had something I was working on. This one I haven't published yet. But it is small enough to fit. A Space Invaders game. What else would be a good game we could do from scratch? What would be a good game to do? Oh, yeah, I was thinking maybe, like, an archery game recently that I wanted to do, like, a, you know, like, the target, like, so you imagine, like, your one side is, like, the arrow and the target's like moving down and you try to shoot the target, and it lands in the target, and then the target... If it hits the target in the bullseye, then that's good. If not, then you missed the bullseye. So...Okay, an archery game. Let's see if we can get some arrow shooting and stuff like that. Okay. So, how are we going to do this? Well, usually you have... Something like this to initialize your variables. I've got my x position to my arrow. My y position to my arrow. And let's see, it's like something like that.

There we go. We've got your hear home, bigger. And we want to shoot the arrow. So you've got like a velocity, right? And that's going to be adding your velocity to x. And then I can all click event. Right? And when you click, it gives you a little velocity. Right? So now we got the, we got the arrow shooting. Let's get our target going here. Ope. So that's our target, maybe it has a... actually we don't really need a variable for our target position because we can keep doing it. part of my look something like that and it's like uh and uh it's like moving with it's like moving with the time there and then we're like keeping it within the some kind of range.Okay. Okay. Can we hit that target? That's what I'm trying to do. It's kind of hard to do. So what we're going to need to have is to stick into the target if we actually hit it. But it's kind of hard to hit. Let's see if we can make it a little bigger, get it ahead maybe. OK, so it's going to be something like that. But we need to have it actually stick into the target. That's kind of important. So, there's a couple different possibilities that could happen, I'm thinking. So, one is you got the target, and the arrow just goes straight into it. That's your best possibility, but it could also be the target is moving down and, like, moves into the arrow, which would not be good. we do not want it to register a hit. So these are all our integers here. So let's say, if X equals, I guess that's something like that. I won't worry about the actual hit for now. If X equals a hit, then we're going to take your velocity to zero. × . I think's it . Okay. Because V is 52. That could be tricky. It's dying to stick into the wall. So. Have a reset as well, so it doesn't keep trying to pound it deeper into the The wall. So we got it sticking. And now we also need to check if the Y is, this is another Y. I'll call it T for target. I'll just try that if we can see if it actually worked. O, it did work. OK, reset. If the arrow hits it, then it's going to reset. We don't want it to reset. We want it to... Move... With the, we're going to do whatever works. 8 times 6, which is 1.

Each frame. Just think of what this will look like. Does that actually work? Oh, we do not want you to say yes. So it's moving down at T times 60, which is 1, which is 10, which is that should be 10. OK, so that part is got it. So let's fix these last couple of bugs here. So being able to pound it through, I think we'll just do v. So you need velocity in order to go. That's greater than. Oh wait, I was gonna do... Let's see what happens if you... We don't want that. I don't think, do we? I guess it doesn't really matter. Maybe that's good actually, maybe that's good. I want it to go past. So now it should be able to go straight through. Okay. I think we've got it mostly done. which need to reset when we... I don't think I fixed that one edge case of it hitting, like, the target hitting the arrow. But, okay, so how can we best reset this? um the arrow eventually goes off screen and i could do that to reset that of you wonderful but give it a tiny bit of gravity that would be cool Oh yeah, I would have to keep track of the shot. Sequels, I don't really think that adds that much to it, anyway. I guess I could check if the X and Y are offscreen, I don't know how else to check if you're... WB Hey And we have the time-example. That works. Now we're going to reset it. Yeah, that's pretty cool. Oh wait, it's still hamming through. Wait, why did it hammer through? It really should only work if you do not have a w velocity. Okay, now we can't hammer it through. But if we get that, we can track our score too. What's that a score tracking thing? You know what would might be fun too, as if we make this target look a little bit cooler. I'm going to... And then... And, I'll do it like that. That's kind of like a. See, it's kind of like something like a little <a href="/tags/3d">3D</a> effect. I'm going to make a key check of your score. Oh, bullseye. Jonathan in the chat is, is, says, something can make it more satisfying, is doing something on the target being hit, like changing the color, particles, et cetera. Yeah, absolutely correct. Absolutely correct. Yeah, we could feel some particles or something like that. Let's do that. Okay, we got red targets now. good. We got red targets now. It targets. How would I throw out particles? Good question. Oh that's not right.

That's why, because he's... That's what he's doing. So he's actually drawing it, I guess, off the bottom of the screen. and then getting image <a href="/tags/data">data</a> from that makes sense. Okay, I was wondering where he was drawing it to or whatever. So that does totally make sense. That's kind of cool. Oh, it's not interactive, but it's like a little game-type thing.Hmm, hmm, hmm. What to do? Maybe we can combine the, um, the vase thing and the, um, the arrow thing. So arrows, so you can like shoot arrows at vases. but uh the vase might be too small to draw too slow to draw in a real time at least with the current method that i'm using oh that feels pretty satisfying i did sometimes Sometimes it… it's still right at the top there. Oh, okay. Wait, I think I know why. The value is probably not high enough. X is less than and y is less than. And why is the Oh. Because of this guy. You need your looping around too quickly. I think. A lot of times recently, I've just been going with my gut and not using the part of my brain to really think exactly how the math works for some of the stuff and just filling it through. And I found that that is a fun way to work. See that? It's all fixed. It's fixed. I've only got about 10 minutes left here. So I'm trying to, working towards wrapping it up. I don't want to get started on something too big right now. But I could definitely break down. That's what we'll do. is take a look at, since this is going back to games and some more interactive stuff, let's break down like one of the other games that I've made and some of the stuff that we can, that would be good. Let's take a look at Wolfenstein. Sure, why not?So this is a ray casting engine, like a Wolfenstein of the days of old, it has control with the mouse here so this is just getting the position of the mouse it's not like locking the locking it or anything so it can be a little bit difficult to control, but that's the demo. And so how does it work, how does it work here well the only input part is this part right here where you are just keeping track of how far the mouse has moved since the previous frame so it's kind of just throwing it onto here, so it's M and this is the previous M subtracting it and then adding that to the rotation of the camera. So how does this whole thing work here? That is a good question. So you've got your direction, you're looking, that's pretty simple. That's just the sine and the cosine of your angle, right? You know how to get that. And this is a for loop here. I'm going to break this up a little bit here. Do we have any commas in here? We've got... Uh-oh. So, for example, that's all on the fill rect. Okay. That's all on the fill rect. So we're going to iterate our distance. There's only one for loop here, which is interesting. We've got our X, our Z. And, of course, there's no Y. Because everything is all 2D here. D. And that's D is how far we've moved, right? And what is J? Okay.

Here's the second for loop is very sneaky in here. So basically what's going to happen is you're going to add the distance. Keep adding 0.1. Keep adding 0.1 to the distance until you hit a wall. This is the check to see if you care position hit a wall. We can look at that in a second. and if you do hit a wall then it moves to the next vertical scan line that's what this j minus minus is and then draws the wall based on how far away it is so this is the center of the screen and then depending on how far away it is is going to be how big of a line to draw is all there is to it um and this this part of it too i think also controls the or this part of it, controls the brightness. So, that's just saying the farther you are away, subtract a little bit so it's not slightly less than one width of a line which will make it be gray. And then this part of it controls the height of the ball. And then It's x, y, and now these things are not used by the fill rect, but that's shelved into the fill rect to save space. See I think if I was to do, after the fill-req it will work perfectly fine. You can use those extra, you can just put it, they're not used as parameters, aren't used for anything. So it doesn't hurt to put it there. It saves me pranz to put it in there. So that's why that's there. So basically you have your fill-req, then D equals one minus, That's an interesting one. I would think that it would set t back to zero, but for some reason it doesn't. Oh, they're not moving. D equals, what's even going on here? D equals distance. Why can't I move? And this is X and Z. That's the, where is the player's position? That's what I'm wondering. So yeah, I have no idea. Hey. Equals to distance. So this. I see A. I'm just gonna start stabbing away at things here. I have a thing called A. Well, A is, I think, normalizing the... angle to look out at. This is weird, man. Why would this even? I think I might have to leave this exercise to the viewer. Oh, there's something that pushes you away when you're near a wall. That's one of the things I remember. and that might be what the weirdness is. Because it's not like it just pushes you in a direction. It's like pushing you depending on every single line and where the walls are. Here you go. That is the rotation. Now I can rotate. that's why so it's like how far away is a wall and depending on how far away that wall is that determines how fast you can move basically um and if the wall is like right in front of you then you can't move now it's not the way you would do this in reality you probably want collision to you know check if you collide with the wall in a more correct fashion because like with this way would probably be possible to even like push your way through a corner or something like that if you could and this is kind of a cheap way of doing the ray casting like you can see i can peek through corners and stuff that's because um we're not using a correct like line check like a prims algorithm type thing for a line test instead we're just doing this add 0.1 each time and you can imagine you're like might actually skip straight through a corner or you skip over something like that because 0.1 these blocks are one in size so 0.1 is kind of somewhat big now i can make this guy smaller but that and that will make it more accurate but that's going to make it a lot slower to render.So I found that 0.1 is a pretty good approximation. So if you were to take this engine here, some of the next things you would do is move out the controls, break out this mouse pose so it uses a locked cursor lock and I can control that a little bit better. It's always moving forward so you probably want to make it only move forward when you're when you're say um so I'm doing all key down TO1 by TO2 andhong somehow Moyn. We have a V, but we don't have a V. Yeah. Key equals. Yeah. I was going to do it really quick. I don't know if this is going to work.

I like being able to just test things out really quick, um, yes, there we go. There we go, okay, so now I can, I can control it with, uh, by pressing w. I can actually move forward instead of having it like move forward all the time. So I have a little more control, and it's super easy to do this stuff, you know, you can imagine building this out more maybe there's like a goal uh the uh the maze itself is also just a randomly generated thing or not not even randomly generate like a seated thing using the uh this four operator is pretty much how all the magic works there like if i was to change this that's going to affect how the um your ultimate ultimate looks okay guys so it's been two hours uh i think we covered a lot we've done we talked about this wolf and we'll see what we have there we did an archery demo. Pretty cool little mini archery game. We did a little vase thing. Where are you at? We did some vases. That's one of the versions of them. We talked about how this system works. Hopefully, everyone now has a pretty good feel for how this kind of like iteration works typing things in here using throw to see stuff and showing stuff to the canvas and all that it's a great way to work uh you're welcome to use this capture s program it's something that i developed it's a bit it's getting a bit brittle honestly i started making it like i think i made it like four years ago now uh so it's i think i might uh start working on a new version of it soon but it's still pretty cool I still use it all the time it's even when I'm working on a bigger project a lot of times I'll have this open in the side and just like messing with little ideas of snippets of <a href="/tags/code">code</a> or this and that so I want to really thank everyone for for coming out to watch my <a href="/tags/workshop">workshop</a> and it's been really good here if you haven't seen my talk make sure you watch it because it's about the same kind of stuff.

How can you help? Take a look at the next slide. I know you're already looking at the slide. I'm far from being a professional. I think you might be still wondering if I'm able to use the term Translator as a term of communication. And here are some of the more recent ones I released on Twitter. Experiencing with different ideas. Quantum effects and Starfield. Little vase creation thing. I did a lot of landscapes recently. That was one thing I've been experimenting with. Kind of like stylized landscape scenes. and just, I get a lot of random ideas. I did a lot of <a href="/tags/3d">3D</a> ray marching type stuff recently too, like these ones. This one's really nice too because it has a pretty cool pretty trippy static type effect, glitchy effect. So At any point, if anyone has any questions or whatever, that's the whole reason for this <a href="/tags/workshop">workshop</a> is to help people out, answer questions and stuff. So please feel free to just type into the chat is probably the best way and just the Zoom chat. So I'm not sure. We're still kind of waiting for people to join before we holy get started here.

So this was a games summit I did do a couple games on on Twitter I like this this baseball one is pretty cool. It's one of my more recent ones. Basically you got you got a variety of pitches slightly different speeds of pitch. I think the ball can curve slightly a bit too, and then it detects a hit with the bat and then depending on the angle of the bat, that determines where the ball goes when it's hit. So it's always kind of a fun little game to do. I get inspired by the the mini games I see, this one is inspired by a WarioWare mini game. This turtle jump rope game that I made. I have another one inspired by WarioWare that I was playing through that recently. Recently we got another game. This one is pretty cool because it's a Frogger and there are multiple levels and the levels actually increased in difficulty. So we can beat the first level here. Oh, shit. The the page is moving on its own. Well, we can go full screen. That would fix that. The. Progressive level one complete. Move. It gets a little more difficult with each level. But I think it's pretty amazing. interesting.

So this <a href="/tags/code">code</a> this is compressed <a href="/tags/code">code</a> now I talked about this in my talk. This is <a href="/tags/javascript">JavaScript</a> <a href="/tags/code">code</a>, but what you're seeing here is the text of the <a href="/tags/code">code</a>, the actual bulk of the <a href="/tags/code">code</a> is compressing these characters here, and the way that works is it it packs it into unicode characters and uses this escape and unescape to remove the unwanted part.So we can actually see the <a href="/tags/code">code</a> if we change this eval to throw. And that'll spit out the <a href="/tags/code">code</a> right here. You can just copy and paste that <a href="/tags/code">code</a> back in. See what it looks like. Usually, though, I don't use this interface to edit tweets, because it's a bit clumsy. We do have a new version of the winner that you can get to by going to beta.twitter.net that has in addition to some other features. It has syntax highlighting. You can also compress and uncompress with just this button right here. so um the compression thing it's kind of weird but it's just something that that is just this is part of twitter um because you can do not only compressed <a href="/tags/code">code</a> but you can do you can store different kinds of of <a href="/tags/data">data</a> like a pixel pixel art and stuff using a similar type of technique so usually what i do though is so here's here's beta twitter Usually what I do is I use this editor called CapJS, and it's a little bit better than Twitter for editing, I feel. It has some nice features to control the timeline and capture GIFs and stuff like that. And this is a little bit easier to work with, I think.so if there aren't any questions uh feel free to interrupt or just like whatever because I'm looking at I'll keep an eye on the chat you know if there are any questions about what you'd like to see or what I'm doing uh you just type in the chat there so the thing one of the ideas I'm just trying to think of ideas of stuff to do um one of the ideas I was going to do is like a vase maker thing. I've experimented with it a bit. I've done a couple different vase type things. Clay vases. <a href="/tags/3d">3D</a> vases. is if they This one was maybe the best one. I could also <a href="/tags/performance">speed up</a> the rendering here. Like this was the best one, I saw him I do something like this because I'm working on another project. And I thought I might just mess around with just a simple one simple base thing just from scratch and just kind of see see how it goes and just mess around with that so how would we do so how do we do a vase this is just the default um set up here so we're using a canvas api um and um What is a vase? Let's start out with a rectangle, I guess, and we'll go from there. A vase is like a height. Let's see here, the height is 60. That'll be your height. We'll do something like that. This is the center of the screen. Drawing a little height. Let's get a width to, so your width is like 30. And then we're just going to draw one. So basically we're drawing one pixel at a time. Let's get a bigger height. Let's get a bigger width. Uh, and so now we've got like a block. Kind of block this out here. Um, so what is, how do we turn this block into a vase? Well, it's really this, this with thing are going to be messing with some brackets down. Um, this with we'll get, uh, we'll vary by, um, using a sign. This is the same as calling math sign. It's just defined for s, c, and t are sine, cosine, and tangent. And we'll use the loop variable. So that's going to be our loop. Let's make this a bit easier to see, make it a bit bigger. OK, now we got a bit of a vase thing going on here, only on one side. we need to minus two now we've got our symmetric shape there so that's one of them so make that a little bit should be a little more like that. Tweaking stuff can be a huge part of this kind of coding. Okay, so you got part of your vase and then maybe you got like another wobblier part one or something like that. I don't know how necessary that really is. Oops, wait. So you've got, maybe we'll have two different waves going through and then use that to make the... So let's make a little random number function.

And you can do something like, do a random number. Would be good here. So on the low end, we're looking at like 20, 30, 30, maybe 30, 100, that type of thing. So I can get, you know, kind of get a value like that. Like, randomization here.And we can do amplitudes too, do amplitude for that. So let's say we do like, So you have the tooth right now, 90. Okay, so now you got your... Your little vase thing here. I feel like it should be a width should also be randomized. So with the offset, too, see how it always starts at the same point? So we would want to do, like, 01 equals a big number. See our offset here. And the width, we can, you know, we can add some randomization to that too. That was not good. Oh, we don't, you don't have it on yet. We'll do instead of doing that clearing every frame will start like that and we'll use key to move these around. So we could see multiple. Whoa. Me doing. Okay. 34, 34. Okay, maybe that now we can see. multiple phases, um... Yeah, that's kind of a nice little start. What if we want to make those a little bit more realistic. I could do a begin path... Heh! That's how the Egyptian made their phases. sorry, I don't know how to pronounce her name. Yes, you're right. This and the Egyptians, they use <a href="/tags/javascript">JavaScript</a> also. Pretty sure. So you might do a begin path, fill, and instead of a fill rect. We're going to do an arc. What do I want to do? Now we've got X. Not an arch. An ellipse. Seven arguments required. I always get confused with these guys, there we go is that right? in this, go back to the source, what am I trying to do, ellipse, and then, That should be X y ... r. Now I'm getting confused. I get confused a lot. I do, I do get confused a lot. That's 20, that's no, I had it, I had it right, it is right. Oh yeah, that's right. Cause this, first of all, doesn't need to be centered here, so that's why the centering is off. And the, the radius, that should be half of what it is. Then this could be, I mean, we can do a stroke maybe. Get a little bit more, I don't know if I like that. Kind of a mori pattern there. I don't know something like that.

We can control the color to I wasn't thinking about doing that but maybe it'll be good to do that too while we're here. I want to center this thing a little bit better. Oh, here we go. That's good. So we can, yeah, I guess I'll show you how to do some color on that. So we're basically going to set the fill style. I'm going to use my HSL for this. is how I usually write it out. Let's make sure we got some color here. Yeah, it's working.So I was thinking the purpose I've got a Zoe. Is or r. R is r is like W plus things of 100. That's definitely going to be smaller. It sounds like they know it's. Even worse, something kind of like that. I just tweaking values here and mess around with stuff Just to give it a little bit of a bit of variety. Oh, that was bad. A little hue variety there. the top opening of the vase would look a lot better if it was a different color darker color so how can we do that I'm going to do I special check for I there there you go see how much that adds to it now it looks like it's actually kind of opening on the top And what else can we do I know that's that was kind of cool I have a nice variety of Trying invasives. Yeah, I'm not sure. Does anyone have anything they'd like to see or other ideas of what the prototype? What I usually do is save. I think I'm working on, so I'll save this out here. Save. Got that good. And I guess I could keep messing around with this if I have to. Add a little more of a... A little pattern to the color so I kind of- how we get a- this is a ellipse so it does make it. It's always going to do is add like a pattern around the outside, but it's an ellipse. I can't do that. I have to make another for loop and then like a custom ellipse. Which I can do if I need to. And maybe that will be good to do as the next step.So instead of this, I probably view a less <a href="/tags/code">code</a>, honestly. So we'll keep your your fill right here. We just saved it. So I guess instead of the ellipse, so what we would do. This is a bit tricky. Can we get rid of that stuff? Get rid of that stuff. When another for loop or a variable, we'll do like H. H is 10. It'd be 6,000. That's not enough. I might have to do 100. Okay, so this is like the angle around the outside. So it's going to be j over 100 times two times pi. Then we're going to do like a let's let's get this stuff out to like x equals y equals and that fill rect. And that's like the center of the thing, right? and then is your odd going to be points and then to the x would be something like sine j times the the radius and then we'll do cosine for that one. And then just <a href="/tags/scalability">scale</a> it down a bit. Ooh, that looks kind of weird.

There's an edge case we're talking about. So one of the things I could do is, you click. Then I'm going to do instead of greater than, we'll do equal to X starts at 20. That should fix that one glitch, because X has got to be just trying to check on that one frame if it hit or not.So we did the color change. We could do some particles. How would I do that? Typically, the way you would do it is like a list. And then add it to the list. And all the particles have their own kind of position, physics, and stuff like that. But we don't have any physics here. anything like that. I don't think that we could do them that way. I might be able to fake it, though. Think of what I would do.So basically, it's an effect that happens when the arrow hits the thing. We're going to throw out some little things coming off of the, um, like a little explosion, like a little explosion type of thing, right? So that's all we want, um. So right now, I'll just kind of put in this on a screen. So we want to do, how are you? Okay, there we are. And this explosion effect, it has like a time. Right. And that time goes from starting at zero. And so that will be called like E, which will just tie to T for now. Yeah, we need to... Add Something like that. He he There'll be something like And he times I We need variation in the variation in the speed of the particles to To mix it up. I know I'm doing weird stuff here. It looks like I'm doing weird stuff. But I'm really not. I promise I'm not. Is that an explosion? I don't know if that's really what I was thinking. I was thinking more of a directed. It needs to be like a cone, right? Or it's not really. Oh, it was Ivor. I was thinking something like something like that, almost, um, you know, like that type of thing. And, uh, And the this is going to be like an effect that goes and there's like a percentage of the effect being complete. Maybe that would be like the size of the particles. Oh no. Oh. So that'd be 1 minus... And then that would be like... Okay, so that's... Something like that could kind of work, I mean it doesn't really have... I don't know if that really is quite what I'm looking for... You know a little bit. Yes. Yeah. Second. That. Thank you. This is honestly.

saying something like. I think I'll probably make it a little bit faster, maybe. I know it's kind of cheesy. Yeah, I'm trying to think of what looks what's wrong with it. It just doesn't look quite right. I think the radius to like to like round I could do two sets of particles, one coming out at an angle on the top and one on the bottom and make them thinner. Yes, I could make them thinner I need to add a rotation as well to make them thinner or something like that Maybe lines would look better than dots here what kind of angle on the top you're talking about the arrow and there's particles on the top of the arrow and the bottom of the arrow maybe um mmhmm mmhmm I wonder if I could do this in a better more realistic way like just with like a list of particles and just when the when the arrow hits to just create a bunch of particles and go to the list you know what I think I'm gonna take a quick break and go get some tea really quick um and I'll be right back and we'll keep working on this and I'll probably go for another 30 minutes maybe an hour I don't know we'll see how it goes but I'm going to go a little bit longer but for right now I just need to go get some tea I'll be right back I'm steeping my tea so I'm going to set a timer here and uh go grab it in about three minutes

I was actually thinking that maybe this, maybe this effect could work. I mean, if it's fast and it's like synced up with the E. I don't think this does anything at all for me. Does it? I mean, it's like... Really? I don't know the number of particles. Yeah, I could... I don't know. Let's just sync up this effect with the hit and see what happens.So how would we even do that? So this has synced up to T right now. So, first of all, this is supposed to be at the position of the... Yeah, it's going to be right in there. And it's going to be where the target is. You always like that. And then the effects. It's the... I know my <a href="/tags/code">code</a> is super messy right now. Oh, wait. We'll get out of here. Get you out of there. I kind of like messy <a href="/tags/code">code</a> sometimes because I can go through and... It's because I know that at its heart, it really is very simple. I can go through and clean it up later. Well, it's not actually going to be T. That's actually going to be Y. Y is going to be the position of the. Forever the. Yeah, I was that has already effectively. Yes and one more thing. So you might have your. So the next thing the effect needs to start. When you... E will be the effect time. and it will be p it will be p right so it will be p p p p oh ob e and then instead of p we're going to do e for the this has got to be some of the worst coding style. Where's coding style? How? What is w equals 10, right? So if w equals Is E... Is E... Reset or something? Equals zero. And... Oh, gosh. Is that... That's gonna reset Um so I see what's happening is this keeps getting called because because it's still gonna be valid because the x is that that is that the um so we can do v boom Wow! Oh you know what I bet it is that makes it look not look good is that the particles all have the exact same lifetime, and that is something that will make it look bad. It's turning from red too soon. I don't want you to turn, I want you to turn red right away. Where did that put that condition? if x if y is less than let's see is that it 1500 there we go now we got a full let it go off screen so like the particle size and like the fade rate of the particle is the same for all of them. And that can be said. So let's say the particle radius is 22 right now. But we could make it I know that the yeah like I would like to be a little bit better. I was going to say this is your size that is your this E times you know just like something that's like a little bit little bit very. Does that work? No. So we get wild here? Yeah. Did you turn it at the top? How did you turn it at the top? I'm losing my mind here.

Did you turn it at the top? How did you turn it at the top? I'm losing my mind here. I feel like it's not fading out fully. Because bad stuff because of That would fade out faster but not slower I guess That doesn't look too bad actually Okay, I think we got the first one that looks okay Look at that That's not bad Not bad at all Boom! Boom! Oh, it did turn hard at the top. That's weird. What's going on there? T and X is less than... I don't know. Strange, strange.We've got a mini archery game here. You actually give some some points. Like a score or something. to make the arrow look a bit more like an arrow. It doesn't look for much in there right now. That might help a bit. Yes, screw it. I'm going to do, I'll just do a really quick. And then you're going to get, I'm going to get like less on the X and then one is up and one is down, but we're going to need more than that. Probably. Where are we? X plus 99, then minus something like that, and then However, like that and then Y is what, so let's say it's, it's 30. High. So there are 15 and then, uh, uh, it's a mess, but we got, we like 152 here we got 215 something like that got minus 15 plus 15 plus 15 minus 31 oh then minus 15 plus 30 i think and minus 30 is that right? Alright. To be y plus 15 minus 30 and why? 15 OK, I think this is about close enough. I'm happy with that. To get the little bit of arrow. Action. I think that's pretty cool demo for just. Like how long have you been working on this? 30 minutes. Look at that. That's pretty cool. By arrowhead is a bit. there we go maybe not more like that uh let's do a score so let's say you're we're like um see i can't use s because s is sine i look at s sure why not why not of your score put a font here on it jonathan says the arrow gives a nice satisfying thunk i think so too it's amazing how just like these small things like adding a point to the arrow can suddenly kind of make the whole thing come alive and you got your score here we're going to give you a couple points if you hit Let's just give you something to hit. Just make sure that works. Okay, so depending on where you hit... Graven T... So this Y actually is off by 15. And that would simplify our calculations. If I could just get rid of all this junk here, maybe like that. And it's going to be a lot more accurate. Then I can do something like so you got t plus h over two, that would be the center of our our guy and then minus y is like how far off your the center, and zero b center. So, you actually want, like, one over that for something. Or could you, like... I think the maximum that would be is h over 2. Which is... Where are you? Which is... I was thinking I could do like sine of 0, and then that's, no, I want you to be cosine. The cosine of zero is like a peak right? So um... So Jonathan in chat is suggesting to do a linear distribution radius of target minus distance from center. Oh, yeah, what am I doing, that doesn't make sense. The radius of the target, which is h minus 2 minus y is the distance, I guess that would normalize it here too. Let's see what happens. Whoa.

Oh, you can reset there. I didn't want you to reset. I need to square that. So, So for example, you got Yeah, I see this is all messed up. So, you take your t plus h over 2 with the position of the center of the... Yeah, and then minus y would give me how far you are off from the center. Right. And if so, so if y was like that, that means you are at the center. Which means it would be zero. which means why am I doing this from backwards that's your distance from the center right and the radius of target minus that would be 10 so your maximum you could be that's not right either oh that's because this is a there we go because that could be negative so if you're H if you're negative you get 0 if you're in the center you get 10 And we pick an integer of that. Well, we don't want you to get zero. We'll give you we'll give you one point if you were. edges. So if I OK, so that was almost a bullseye. That was nine that was one having missed bullseye is actually 11 I think because we got. We got that there so I can do nine over. that. Now that should not be 11 that should not be 11. Or wait, did I? Okay, that's right. That's right, because I added it in 211. Yeah. That's good. That's good. Yeah, good suggestion, Jonathan. I think this is... It's feeling nice. It's feeling nice. Just a simple little archery thing. But, I hope people are getting something out of this like this is just a great way to prototype ideas to mess around to like this <a href="/tags/code">code</a> I mean it is throw away yeah but the like things the techniques the things that I've done like you saw how I was able to just kind of home in on different ideas and just like I know how to like make these things happen because I've done it so many times.What else can we do? What can we do to make this better? We should move on to a different demo. We're at about an hour and a half right now. So I don't know how much longer I'm going to go. Maybe I'll try to make it to two hours. As long as there are people here who are interested in watching. And it's pretty fun. Jonathan in chat says, there's a lot of small bits of <a href="/tags/animations">animation</a>, interactions, that tend to be very math heavy. And I'm seeing now how simplifying to this level can help figure those things out and how it could be good practice just playing with it. Yes, I'm totally with you, Jonathan. Coming back to when I used to work in the games industry, just even like I didn't know <a href="/tags/javascript">JavaScript</a>. I only used C++ and thinking about how I would, or like say Unreal Engine. So thinking about how I would make this happen in Unreal Engine, I guess, well, I mean, it's not necessarily hard. I mean, it's just a totally different thing. It's just that everything is taken care of for you in Unreal Engine. You know? And there's, it has physics built in. It has all that stuff built in. So we probably leverage, say, like, the particle effects in Unreal rather than writing the particle effects from scratch like this. But I think there's something to be said for just having full control. Like, there's no engine here. There's no, like, physics system. There's really nothing.

And being able to prototype an idea, like if I was to use Unreal for this, it would have taken like all day. It would have looked better. It would be in <a href="/tags/3d">3D</a> and stuff. But ultimately, I think I prefer this way of doing things. So it's just you can start to really layer on different concepts and the sky's the limit. When you go through and you clean up the <a href="/tags/code">code</a>, you see how simple everything is. Give things better variable names. You know, that's probably the next thing I would do. Like, if I was going to keep working on this, I would definitely step in here, clean things up a little bit. Make it easier to read. I might even try to make this fit in a duet. I think it could be possible especially if I get rid of the effect. Takes up a lot of space. I think it really helps understanding how this stuff works. Like the, for example, putting out a little particle system like that. Like, you probably would not make a particle system like that in an actual game, but you might make something else like that, if that makes sense. You definitely will be using sine and cosine and similar concepts. So being able to just kind of envision it in your head how it works. That's good. That's good. Now I wonder if i was to um let's see to get an idea of how big this thing actually is? So if I was going to try to make this finito wait I would cut rid of that. I would get rid of that. I would get rid of this whole entire thing. Whoops. That goes away. I think um We just throw your score. Maybe I'll show it down here. So we're still at you can see we're still way over the limit for what would be potentially possible on Twitter. I think could maybe I think it could maybe fit with a lot of work that goes away. It's just really tight trying to make things fit. It's kind of amazing what we've been able to do on there. When you start to look at things and you're like, oh, wow, I need to cut off like 100 characters, how could I possibly do that? I can't get rid of the score. This is just an experiment to see how much I would have to chop away to basically make it fit on Twitter. Chop, chop, chop. That didn't work. Sometimes you can use a bitwise one, but you need a boolean to work with there, so it's not going to work every time. We would still need to get rid of another 30 bytes or so. Like it's b equals Q. I guess it's pretty hard to do. You can put that in there. Those parents can go away. Yeah. This can go away, too. You can probably tweak that out. This loop here, I'm probably going to have to get rid of that, too. Dang. OK, now we are within space. We have meet and fit. So something like this I might be able to put the score back in for when I publish it, because we have 9 bytes of space, and I'm pretty sure that there's other stuff I can do. The example I can do Find those together.

Page can go into there. Number 180 something. So yeah, it's definitely possible. Just can be very limiting. For what you can do. Let's see, um. We'll save that. Always remember to save what you're working on. These files are very small, so they don't take up very much space.A couple of things that we're going to have published yet, this one is like a sunset, just gradient. I kind of like it because this is so simple. you know i've just been trying to think of like what can i do with this because this is only 99 characters so i have a lot of space left to if i wanted to to um do something else with it maybe make it into a landscape or something like that i've only decided but i really like using the um the red green and blue channels to create this thing and i have this like weird kind of maze effect that builds up in the center I thought it was really interesting it's still a bit over but I'm pretty sure I can make that small enough to fit just not really sure what to do with it it looks cool at first but then it just kind of gets a little bit too crazy and then I don't know what to do then I have this one it has like these little mini art drawings that I'm messing around with A couple of the things have been doing.Let's take a look back at. That could tweet field. Yeah, let's see what else we got. Maybe get some more some more <a href="/tags/inspiration">inspiration</a> here. Pretty cool stuff. Recently our fractals. This guy hasn't shown up a lot. I haven't seen him. Rodrigo has been using it often. And let's take a look at this thing. It's kind of, very old. Missy fractal. People are putting eyes on everything. Oh, here's a nice-looking one. What are you? I wonder if this is based on a... Some kind of gnome fractal. I don't know if I like that one as much. What's that? A micro default, okay. A lot of eyes. I don't get inspired by anything here really so much, honestly. There's some cool stuff. That one's cool. I was wondering how he did that, actually. How did he manage that one? Let's see. Okay. This piece that's right. Oh, what's happening here? Whatever it is, doesn't look like this. Oh, he's he's using image <a href="/tags/data">data</a>. Let's get through this invert here. What's going on here. Oh, Whatever it is...it's not working very well. He is filling.... Here. Did he draw anything on the screen? Oh. Oh, cause... Ws480. What's going on here? Okay, because it's off the bottom of the screen. It's off the bottom of the screen.

JS GameDev Summit

JS GameDev Summit 2023

Tiny Game Live Coding Workshop

Masterclass de Codificación en Vivo de Juegos Pequeños

The Workshop covered a range of topics, including game development, code optimization, and fractal art. The presenter demonstrated various mini games created on Twitter, as well as a vase maker and an archery game. The use of particle effects and ray casting techniques were also explored. Overall, the Workshop emphasized the importance of prototyping, code cleanliness, and experimentation in software development.

Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.

Frank Force

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2024

React Summit US

React Summit US 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

React Day Berlin

React Day Berlin 2024

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get a free remote ticket & join me there with 5k other #nodejs devs & 35 great speakers #deno #cloudflare #awscloud

Node Congress 2025

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2025

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2025

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

Tiny Game Live Coding Workshop

FAQ

Comments