Tic-Tac-Woah!

The Button is working! It’s finally done. Next I’ll genuinely do game logic.
I can make the button do anything with a function in its constructor, which basically means I can have it change variables and stuff when you click it. This can make a lot of menus and, what I’m planning, it’ll make child classes like Checkbox or TextField. That way, a lot of stuff can be done in a menu.
Sorry for the short devlog, I’m really tired.

LET’S GO, I GOT UI DISPLAY DONE!!!

I finally fixed the shader issues by just… going with my original idea and including a UI flag as a GL uniform. From there, I can just change the code to do different things for UI.

So, yeah! Now, I’ll quickly make button and UI click detection, then I’ll make menus! After that, I’ll do game logic.

Look, I’ve made a scene!!! I think this is really cool-looking now, but the UI is still not camera-based. I swear I’ll do it tomorrow. It won’t take long, I’m sure, I just keep getting distracted with other changes. That’s a thing I need to stop doing since I only have a week left to work on this project before shipping.
I had to do a lot of debug to get everything working perfectly. Included is a screenshot of a successful console.log call.

But… I have sad news… everyone say goodbye to the Link Cube.

OK! Got buttons working visually!
Now I’m going to make them stick to the camera, introduce cam-coordinates and all that stuff. Yay! Sorry for the wait.

Quick change:
I’ve changed the inheritance of UI classes; now there’s a base UIObject class that contains most of the important stuff. Also, Button is now inherited from Panel rather than from Text.

Now the text can be red! When I get back home tonight, I’ll finish the UI by sticking it to the camera. Bye!

I’ve begun on the UI !
So far, I’ve made classes for Panels, Text, and Buttons. Currently, the buttons are not working as you can see in the corner of the video. But the text and the panels are working amazingly!
Now, my plan was to have these stick to the camera with a container-like UI class, but this testing is making me realize that these objects can be used for way more than I first intended.

You can see a very comical failed test run in the second screenshot, where it looks like I’ve recreated Missingno or something 😭. But yeah, this stuff is going well and I expect to be done with UI once I hook it up to the camera and make a menu or two.

Wow! I just wasted a lot of time!!!

So, I was basically trying to make a function that sorted vertices by angle around the center of a polygon… it did not work out. I don’t know if my math was wrong, or if something else somewhere else was wrong, but I wasted a hell of a lot of time trying to fix it before ultimately commenting the whole thing out and working on something else.

And that “something else” is this!! I have created a new PolygonGroup class that lets me make more complicated shapes like a sphere by just cobbling together a whole bunch of little rectangles. There it is in the middle of the tic-tac-toe board. It looks very round, doesn’t it?
Next, I’m going to make UI, which is important. I think it’ll be easy, too, as long as I find a way to add text. I suppose I could make my own font and load it in like that. That sounds like fun, actually.

Anyway, my idea for the UI is that they will just be textured rectangles sitting right up against the camera. I suppose that’s how all UI works, but adding it to my game will be a little bit of work making sure it always stays with the camera, since everything is pretty global right now.

I’m trying to make my shape classes better for the future by sorting vertices by angle… It has not gone well with the vertices so far, as you can see.
I did successfully fix the sizing of the Xs and Os, though. Once I get this stupid thing done, I’m pretty sure that almost everything else, like UI, won’t take long. I’m trying to lock in 😭

Linear Algebra is killing me rn

I’ve added Xs!!! As you can see, when you click on a tile, an X is added on top.
This means I basically have the following to do now:

• Turn logic
• Winning logic
• Menus and modes
• More cool maps!
• Anything else I forgot about

So, I’ve been doing some polishing up of the code. I’ve been adding comments to things and making more helpful functions. I tried adding the placing of Xs and Os, which, as you can see, did not go so well so far. That’s just what you get the first time testing a complicated function. And, unsurprisingly, it doesn’t work.

So my next mission is debugging that because it’s very important for placing the… game pieces? Shapes? …it’s important for placing the tics, tacs, and toes.

So, before I did this big change to how I rendered stuff, I had the polygons of the wheel turn white when hovered over. To re-implement this, I thought I was clever when I just added a color that had reciprocal components to the normal one.
Then I realized that I forgot about… the number 0. You can’t really reciprocate that. So I needed a different solution. And that solution was to change my fragment shader!

Now, the material color overrides the polygon color. This makes it so that I can turn stuff white (or any other color) COMPLETELY while keeping the original color saved under the hood.
This was just to recreate a testing effect, but it’ll probably be useful for something.

The way in which I detect if there IS a color to override the vertex color is to see if its R component is positive. That might sound crazy, but here’s why. I added a default color to my COLORS object called COLORS.NONE. Its components are all -1, which means it won’t affect the vertex color (because of the if statement).
If that’s a… stupid way to do it, please tell me, but it works well !

The rendering of all of the objects and stuff has been simplified now A TON and it’ll be super easy to make stuff now. Which means I can actually start making this into a GAME. Which is, you know… kinda what this whole thing was for…

So, yeah, the next thing I’m going to do is adding Xs and Os!! I’m super excited because it’ll be interesting to dynamically create rendering objects and add them to the list, which my new system will make VERY easy.
After that will be game logic, and after that will be UI, and after THAT… uh… just make cool maps, I guess?

Just an update, since I’ve taken a TON of time on this addition…
I’m completely changing the rendering code. It was honestly really bad, recreating the whole scene every frame… So I made rendering classes! You can see them in the images below.

The primary image is a screenshot of a… successful test of the textures. Well, only the textures. The colors had quit for some reason. Also the square did too.
(Yeah, that’s my placeholder sprite)

I tried making a better, kinda optimizing or something, combineGeometries function, but it didn’t work AT ALL and I decided that I’d give up on that for now.

I fixed my Polygon class!
I changed the algorithm for getting vertex order to use alternating triangles rather than fan triangles. This solves the issue of concave polygons, so now these cool circle bits show up correctly! I liked how I coded it, so I included a screenshot of the loop. Isn’t that awesome? I think it’s awesome.

Secondly, I started experimenting with shaders. I used some randomness to make a shader that makes everything shake a little. Or a lot, if you want.
I stole a randomizer function from online and passed in a random vector from my Javascript. The code is shown in one of the screenshots below. I included videos for the following:

• A small bit of shaking to emulate a sort of hand-drawn style
• A little shaking, maybe to make things seem tense
• A LOT OF SH-SHAKING

Side Note:
I also fixed the coloring on the board there, as you can probably see. Minor thing, but it’s cool.
Bye!

I’ve just added mouse controls to the camera. You can now move the camera by holding right-click and dragging, which works just like WASD. Scrolling zooms in and out, although the scroll is a little bit choppy.
The video doesn’t really make it clear that I’m controlling the camera with my mouse, but I do make the mouse disappear while you drag it, which adds to the effect.

I FINISHED THE CAMERA!!!
It all works now: orbiting, setting a position to look to, and other stuff. I had to look up a lot of math and details for it, but I implemented it and now it works!
Here’s a clip of the camera orbiting the center and NOT experiencing gimbal lock. The thing is, I tried in like 3 different, convoluted ways to avoid the locking, but in the end I just clamped the value to be a LITTLE less than π and a LITTLE more than 0. Yeah, it was lame but it works.

Also, you probably noticed this, the tic-tac-toe board there is a bit buggy. Yeah, my polygons are NOT the best when it comes to concavity. I’m going to try a rewrite of the face logic to fix that, so hopefully they’ll stop z-fighting soon.

I finished the raycasting from the camera!!!
It took a lot of fixes and many a disappointed return to Wikipedia pages about linear algebra, but it is done! Now, every polygon knows whether it’s being pointed at or not. Isn’t that great?

Now, basically every major part of the graphics, interaction, and geometry of the game is done. From here on out, I just have to… make Tic-Tac-Toe! On arbitrary 2D surfaces… with arbitrary shapes…

Shouldn’t be… too hard, right?

I made a circle!!!

Using all of my polygon tools, I easily made a circle with a for loop and some trigonometry. It looks nice spinning around, and the color was easy to add because of my Color class.
I did have one issue with the vertexCount in my function for drawing the scene, but I just added an auto-assigned vertexCount so that I won’t have to worry about it.

Writing this now, I think that maybe I should install a maximum number of vertices… I’ll do that next so that I don’t get surprise crashes or performance issues from accidental vertex overload.

Also, I’m currently working on a Camera and Input class! This is all so that I can easily calculate and get raycasts from the camera using the mouse position on the canvas. It’ll be necessary for playing a game on a surface to know which tile the player is mousing over.

WELL I MADE IT WORK!

The cube is correct now because I fixed an error with the order of the vertices of a quadrilateral when it gets created. I’ve included the code to make this all work, which is SUPER SMALL in the grand scheme of things.

Sure, the cube-making part is kind of complex, but it’s way easier to think about making parallelogram than typing in all of the vertices individually. This also allows for PROGRAMMATICAL GENERATION OF SHAPES!!! I can hook this code up to some sort of circle generator and then easily be able to make colored circle-slices or annuli or whatever.

I have written A TON of code for Triangles and Polygons and stuff to make it easier to make shapes and visuals with WebGL. I’ve got functions for checking if a ray intersects a triangle, generating vertex arrays from a polygon, and other stuff that will be very useful. I’m basically creating a whole library for this stuff, although it’s not too big.
Anyway, what I’ve done now is made a rotating cube with only _ lines of code in the main functions! That will make things SO easy in the future.
…I hope.

In my first test… yeah, it’s not looking good; that’s supposed to be a cube.
I’ll fix it, though.

I created a color system which makes it easy to add and manage colors for vertices. With all of my color functions and stuff in a different file, I was able to make this pulsing square in just 4 lines and with a much more easily changeable architecture.
My next goal is to make some classes and functions for polygons and improve the architecture for displaying them. My next devlog will have a 3D shape!

I finished the simple square WebGL tutorial from MDN Web Docs!
I’ll have to learn WebGL, so this is a good start. From here on, I plan to figure things out myself and generalize for making my game.