Devlog 8

Probably my last devlog before working on saving and exporting T-T

What I worked on

Stops in scripting

I can’t believe I didn’t add this earlier, but you can now end the game using matu.runtime.stop();

Label nodes

You can now have text labels in your game! I also added scripting implementation, so you can change what the text says during a run.

Fixed reordering

Reordering nodes was a bit clunky, so I fixed it (turns out there were some bugs in the CSS and the dragging), but now it should be smoother!

Devlog 8

This is probably gonna be a shorter devlog, but basically I made scripting a lot easier in my game engine!

Each script node now has a button in the top right of the inspector editor. I just reused the asset previews but with a textarea. This means you can have multiple popouts open at a time while scripting. It also gives you a much wider area to code in, as the inspector is kinda cramped. All updates in the popout update with the inspector textarea. The popouts are also resizable!

QoL improvements

Tab for indent

Before, if you typed tab while scripting, it would just move focus to another button instead of indenting. However, now when you press tab, 4 spaces are added. You can select multiple lines to indent multiple lines, and press shift + tab to unindent lines.

Auto-close pairs

Now when you type a character like ( or [ automatically types its closing pair and places your cursor in between them. If you type the closing pair again, it will move your cursor to the outside. As well as that, deleting an empty pair will delete both characters.

Auto-indent on enter

Now when you go to another line, it will inherit the indentation of the line above it. :)

What’s next?

I really thought that with the introduction of scripting popouts, I would be getting close to finishing the project, but over the past few days, I’ve realized that there are still a lot of stuff I want to implement. First, I want to add a Label node, allowing users to display text easily. Next (and I can’t believe I haven’t implemented this yet), I want to add a way for the user to stop the game in the script, instead of clicking the stop button. I want to fix node reordering, as right now it is a bit clunky, and of course, the final thing for me to do is to add exporting, saving, and loading.

Devlog 7

It’s been some time since I have posted a devlog on this project. I got a little sidetracked and spent a few days working with Rust. It’s probably gonna be my next project (flashcard app, I know, how original), but I’ve also spent some time working on scripting!

So scripting was actually easier than I thought to implement. I have a const in my runtime.js file called matuAPI and it has every special function as well as what to do when that function is called. I’ll attach a screenshot of a section below. So now, on to what I have added!

• node lookup
• cloning
• spawning
• input
• rotation
• movement
• dimensions (width + height) changes
• opacity changes
• visibility
• asset changes
• playing and sotpping audio
• collision
• global variables
• changing bg color
• and timers!

Wow, that was a lot! Unfortunately, as I was writing this devlog, I realized that I forgot to add a function that lets you change which sprite is being displayed in an object as well as changing the audio source asset. How does this always happen to me? Ok, I’ll be back in a bit. I need to add that real quick.

Ok, I have returned! I have added them to the code and the documentation (which is just a markdown file), so we also have

• changing sprites
• and changing audio assets!

Thanks for reading this devlog! Up next, I plan to add a pop out window for scripting (as the current one is too small) and of course, exporting, loading, and saving (I’m scared, save me)

Devlog 6

This is probably going to be my last devlog before I work on scripting. I’ve put it off for too long, and right now, scripting is pretty limited (it has a start, end, input detection, movement, and console log function). I plan to add a LOT more to scripting, like changing sprites, changing opacity, rotation, cloning, deleting, audio, preview, and more. I also plan to open up the script in a window similar to the preview windows, because coding in the inspector sidebar is a bit constricting. Now, on to what I have been working on!

Audio preview

I can’t believe I put this off for so long, but it finally works. You can play audio from the preview window. Though, it’s a bit ugly right now so I plan on changing that later.

Value tags for opacity and volume

Before this, the two sliders were just sliders, and you couldn’t bring it to a specific value. However, there are now inputs on the right side of the sliders, allowing you to see what number the slider is at and allowing you to input your own values.

Unique names for nodes

I actually created two systems for this. So my idea for the node naming system is that unique names are kept separate across node types. That means that I can have an object called Thing and a group called Thing. My first idea of implementing this was to create a Set() for each node type. So I created group_names = new Set(), object_names = new Set(), sprite_names = new Set(), and so forth for each node type. Then we reuse the renaming function from script.js for the assets, but change it to have a switch statement based on the type. However, this was kind of hard, implementing a switch statement everywhere a rename or deletion or any sort of change happened. I replaced it by simpling using the hierarchy_nodes Map, which contains the names and types of each node. With this, we can just pull the type from the map to make sure that names are kept separate across types. It removes the big switch statements that were everywhere and overall keeps the code much cleaner.

Rearranging nodes

Previously, you could technically reorder things because I previously added reparenting, allowing you to move nodes from one parent to another, but it doesn’t allow you to rearrange nodes within a parent. Now, you can, and although its a bit clunky, it does work and I think it looks good.

Alright, thanks for coming to this TED talk. The next devlog will be about a lot of changes that I will make to scripting.

Devlog 5

I was too lazy to add all the features other than basic functionality to scripting, so I decided to work on some small bugs and features instead.

Also, today I learned that you can ATTACH MULTIPLE SCREENSHOTS. This is like a gamechanger lol I can’t believe I didn’t know this.

Extra line at the end of the viewport grid

For the grid in the center of the screen, the function I used to draw it didn’t close it off on the right side. I can’t believe it took until now to fix it :|

Changed hierarchy node symbols

I changed the symbols on the left side of each of the nodes from emojis to letters. I used emojis because I didn’t want to find assets (sorry), but recently I’ve been feeling like the emojis make it feel AI-generated, so I removed those. Also, a bonus of changing them to letters is having the ability to now have the same name be used across different node types, but when you call them in code, you have to do like G:Object or O:Object.

Fixed opacity slider position

You might’ve seen in my last devlog, something kind of crazy happened with the slider… Anyway, it’s fixed now, so that’s good! I also ended up customizing the slider.

Width and height lock

Before this, I didn’t have a way for users to lock dimensions. I’ve implemented two checkboxes into the inspector, dimension lock and proportion lock. Dimension lock takes the current dimensions and keeps that ratio, while proportion lock keeps the original dimension ratio of the original asset.

Closing the correct inspector

Basically, there used to be a bug where if you deleted one asset while another asset was open in the inspector, it would close the inspector. It wasn’t harmful or anything, but it was really annoying. This was a pretty simple fix. I just added a check where the name of the asset in the inspector is compared to the name of the asset being deleted.

Changing console color

I don’t know if I mentioned this in a previous devlog yet, but I added a console for errors from scripting to show! It also displays start and end times. However, it was the wrong color for so long and I didn’t notice. It was just because I put the wrong class name in the css…

Refreshing asset options

This was also a bug that was really annoying. When you created a sprite and opened it up in the inspector, when you uploaded a new asset, it wouldn’t show up in the inspector. This was also pretty easy to fix. I just created a helper function, which basically just remakes the asset select options, and then called it every time an asset is changed, like when one is renamed, uploaded, or deleted.

Adding sprite selection in the inspector

I can’t believe I didn’t add this yet, but I added a new option in the inspector. If you have multiple sprites attached to an object, you can now select which sprite to use.

Devlog 4.5

what did i just do 😭

Devlog 4

Recently I’ve been working on getting the scripting working. I’m using normal javascript with some added functions with something I call matuAPI. But I’m not here to show that right now. Rather, I think I should show some of the code of how my project works! Today, I want to talk about how I get multiple preview windows!

How it works

Every time someone double clicks an asset in the asset panel (which we can check by adding an addEventListener('dblclick', () => {});), a function called openPreview is called. When we call that function, we check to see if a preview of that file is already opened. We have a Map() called preview_windows, which contains all the previews that are currently open. If a preview for that file is already opened, we can simply just bring the preview back to the center of the screen.

Now, what happens if we don’t have a preview open? Then, we create a new div with the class name preview-window. Inside that div, we will have another div for the preview header (which contains the file name and the word “Preview”) and below that div, an img tag with the file image. If the file type is an image, then we set the src of the img to URL.createObjectURL(file). I haven’t had the time to add audio previews yet though…

What happens next? A function called centerWindow is called. It brings the preview div to a select random few points in the middle of the screen. This prevents all the previews from opening up in the same spot. Next, in order to make it draggable, we call a function called dragElement. It detects when the “handle” (the preview header from above) has a mousedown and mouseup event, using a document.addEventListener('mousemove', elementDrag); and document.addEventListener('mouseup', stopDrag);. In each of these functions, we change the position of the element that is being dragged when the mouse is down. We also call a bringToFront function, which just adds a predetermined number to the element’s z-index.

When the user clicks the close button in the header of the preview, we call the closePreview function, which is pretty simple. It removes the name of the file from the preview_windows map, and just deletes the preview.

There were some bugs while making this; renaming issues while a preview is open, the preview not closing when the asset is deleted, and some other elements that had to be added. But I’m pretty proud of the fact that it works and some QoL features that I added to it, like reopening the preview recentering it.

Thanks for reading this all the way down :) Next devlog, I think I’m going to plan on describing how scripting works!

Devlog 3

Nodes now work!

I mean, you can now create them. Peep the screenshot below! I had to create a new .js file because script.js was getting a little crowded. It was getting a little hard to find stuff I’m pretty proud of how it works, but I’m planning on improving it later.

Types of nodes

I’ve added 5 node types.

Groups

Groups are used to group other nodes together. Groups can hold other groups or objects directly under them, but no scripts, audios, or sprites.

Objects

Objects are like the main nodes you will use. They are you use audio, sprites, and scripts. They can stand alone or go under a group. As you can see, in the inspector, you can edit the x values, y values, width, height, etc.

Audio, Scripts, and Sprites

These 3 nodes require a parent object. They cannot hold anything. This is how you attach images, sounds, and code to your object!

What’s next

This devlog is a little short compared to my other ones, but I’m still proud of what I have made! This is probably gonna just end up as a prototype for the final node system. I’m planning on adding the option to lock width and height, letting users drag nodes around and locking them, and reordering nodes. Right now, you can just drag them around from group to group, but you can’t change their order.

After finishing the hierarchy, I’m going to move on to getting the coding part of the game engine working. I’m planning on using Javascript or a modified version of Javascript as matu’s language. Maybe I’ll call it matuscript heh

Next, the obvious choice is to work on simulating the game in the viewport. (I’m scared of this)

Finally, I want to work on save files and exporting. I still don’t know how I’m going to accomplish this (I’m even more scared of this)

Maybe I’ll distract myself by working on the looks of matu first.

Devlog 2

stress testing is stress testing me

Anyway, it’s been 2 days since I last posted a devlog. I’ve been focused on making the asset uploading as perfect as possible. You can see everything I’ve done in the screenshot attached below! I’m pretty proud of how it turned out, but it took 6 hours smh… (I’m scared for making the actual game engine part)

Now for the things I did!

Asset uploading!

This one is pretty obvious. Anyway, I’m pretty proud of how it looks and the fact that it works. In the asset panel at the bottom of the screen, simply click the “+” button at the top right. You will be able to upload any file, though anything that isn’t an image will have an emoji in its place (audio files will have a music emoji and other files will just have the document emoji). It’s totally not because I’m too lazy to actually create a placeholder…

Inspector

The inspector panel on the right only has one function right now, and that’s to rename assets, but I plan on expanding functionality later on! For example, when we actually get the game engine working, I want users to be able to change the x and y of objects in the game manually, change size, etc. Still, I’m pretty proud of how it looks right now and the fact that it works :)

Preview windows

This one is probably the thing that took the longest. I never want to deal with draggable windows again. Anyway, when you double click on an asset, it opens it up in a preview window. You can drag it around, and that’s pretty much it. But it’s cool and also it took the longest to make (excluding debugging, which probably took like half of the 6 hours).

What’s next?

Up next, I’m going to work on the actual game engine functionality. First things first, I want the user to create objects in the hierarchy and for things to start showing up in the viewport. I don’t think this should be too hard, but I’m probably gonna regret saying that. Then, I’m gonna get the coding part of the game engine working. I still haven’t decided if I want to create my own language again or just use javascript. I also have to get the game working in the viewport so users can test out their game. Finally, I want to work on being able to export games into html and js.

thanks for coming to my ted talk

Devlog 1

I’m building a game engine that I’m calling matu! After around 30 minutes, I’ve finished the basic layout. Right now, it looks a little like Godot, so I’m considering changing it.

The Layout

You can see what it currently looks like in the screenshot attached. There are 5 sections.

The Hierarchy

This is where the nodes (sorry for using Godot language, I don’t know what to call them) are going to be held. Stuff like objects, cameras, backgrounds, etc.

Assets

This is where the user can upload assets and stuff. I’m probably gonna implement this feature first.

Inspector

This is where the user can change aspects of each object, like coordinates, size, etc.

Viewport

So this isn’t actually labelled, but it is the central grid. This is where the user will place objects and where the game will be shown.

Toolbar

This isn’t labelled either, but it’s the panel at the top of the screen. I’m planning on adding run and stop buttons (pretty obvious), save, load, and export features.

Some things that I’m still in the planning phase are where to place scripts and how to add save files. For scripts, I think I’m gonna have one script for each object, but I don’t know where to open them on the screen. For saving, that’s a problem for another day TuT. I have a pretty good idea on how I’m gonna implement Assets and a moderate idea of the Inspector and Hierarchy. Thanks for reading this all the way :)

keysound Devlog 1

After making the Lenny Face-er (a stupid program that allows you to open up a menu at any time to copy and paste lenny faces), I got kind of excited at using the pynput library in python. It allows you to detect universal key presses.

What better way to play with it than make it play clicking sounds!

So once again, I want to make something lightweight, so I’m using tkinter for the GUI. Right now, I have the basic function of it worked out. You press a key and a sound comes out.

Things I’m a little proud of

Detecting when a key has already been pressed

Pynput still detects a key is pressed even when it’s being held down. I don’t want a sound to be played over and over just because a key is held down. To solve this, I added a list named keys_pressed. Basically, how this works is that whenever a key is pressed, that key is added to the list through keys_pressed.append(key) and once the key is detected to be released, we remove that key by running keys_pressed.remove(key). However, special function keys, like CTRL and ALT need to be converted to match the alphanumeric keys.

Playing the sounds

At first, I tested using the playsound3 library. However, it made the sounds EXTREMELY delayed. That’s because the playsound library stops everything else in your script to play the sound. That’s not what I wanted, so I used the pygame library. For some reason, mixer wasn’t working so I resorted to using the pygame-ce version (I’m too lazy to find the real issue). Anyway, it was much faster, and I also converted to using .wav files. However, when typing fast, some sounds were still not playing. I fixed this by making each sound play in a different channel, so the sounds wouldn’t cover each other up.

What’s next?

What I want to work on next is the GUI. I want to add a feature where users can easily switch between sounds. Right now, I have 4 different keyboard sounds, but to switch between them, you have to go into the code and find the variable called key_sound (ayo the name of the project!!) and set it to the file path. I’m gonna add buttons so it becomes an easy user experience.

Devlog 8 - Goa 1.0

The first full release of my coding language

i’m tired boss image here

Wow, I’m never writing documentation again. This sucks.

Anyway, lots of new things. First, bug fixes

Added RAND and ABS

I don’t even know how this happened. I swear I added this, and it was in past documentation, but it’s not just in the code. I had to quickly write them in.

More parser issues

More complex comparators like <= and >= were being split apart, and so it wasn’t being understood. I also had to rewrite the logic for IF and ELSE IF blocks.

BASE returning NaN for bases above 10

Ok I’m sorry, but I’m too lazy to actually fix this. BASE will now just return an error if you try to convert a number past base 10. I want to keep Goa without any strings.

New statements

Logarithms

The new LOG statement allows you to do logarithms for any base. Hooray!

Trig statements

I added SIN, COS, TAN, ARCSIN, ARCCOS, and ARCTAN statements. Should I call the last 3 ASIN, ACOS, and ATAN? Let me know your thoughts.

Rounding statements

You can now use the ROUND statement to round to a certain number of decimal places. I also added FLOOR and CEIL functions.

More random statements!!

I added RANDFLOAT and RANDSIGN for generating random floats and generating a random sign (-1, 1), respectively.

GCD and LCM

pretty self explanatory

Factorials

Guess my old programs doing factorials are now useless….

Documentation

I’m so exhausted reading through all of it. I’m done. I’m never writing any more documentation again. I hate writing error messages. I hate writing example programs. ARghh

Devlog 7 - Goa 0.9 Beta

My coding language is now close to release!

Try it out at: https://goalang.vercel.app

In this update, I think I did a good amount of work on the language. I have added float support. Basically, for each variable, now instead of just storing a value, each variable also stores a type - integer or float.

With this new type, we have some things to define.

Firstly, I’m making Goa have strict typing. To convert between types, use the TOINT and the TOFLOAT statements. Goa also uses safe promotion, meaning calculations involving two integers will produce an integer, while calculations involving at least one float will always produce a float.

New stuff!!

New comparators!!!

I can’t believe I didn’t include this earlier, but now here they are! The <= and the >= comparators!

New changes and clarifications… (not as fun)

The DIV statement now only returns integers. The EXP statement now only takes positive exponents and if your base is negative, only odd exponents. The BASE statement now only takes integer statements.

New statements!!!!

With the DIV statement now only returning integers, run the FDIV statement to return floats! Now that the EXP statement no longer takes negative exponents, run the ROOT statement to do roots!

What’s next?

For the 1.0 full release, I plan to add a lot of statements. I also want to add OR and AND statements… but that’s a little too much work for me. I don’t know, I’ll see. I’m planning on adding trig functions, more random functions, gcd and lcm, and more.

I’ll see you guys later!

Devlog 6 - Documentation for my Coding language!

visit the docs at: https://goalang.vercel.app/documentation.html

Documentation for Goa is now complete. This is Goa 0.8 Beta, because I’ve also finished some final touches to Goa. Before the full release, I plan to add more comparators, floats, and more math functions.

What i’ve added

Smooth scroll

Now when you use the left sidebar to navigate the documentation, the site smoothly scrolls to that section.

Theme changes now save across the IDE and Documentation.

Localstorage now saves theme choice, allowing your theme to be saved when switching pages and when reloading (which I think is kinda sick)

Added a back to top button

Once you scroll down a bit, a back to top button shows at the bottom right, allowing you to scroll all the way back up! (also, it has a pretty cool pop up animation)

Changed formatting

For the tag, I’ve added formatting making it stand out more from normal text!

Lots of animations!

I’ve added several hover animations for navigation links both on the sidebar and within the docs, animations for the back to top button, and a quick pop up animation when you first open up the docs!

Unique scrollbar

i made my own scrollbar

I fixed the parser for the code

now my nested commands work again heheheh

Devlog 5

omg i’m gonna literally combust

Anyway, so for the past like 2 hours of coding, I’ve been working on my documentation. And I’ve got to say, it absolutely sucks. It’s like I’m writing an essay for my English class. I’m have like 20000 characters, so in like one day my html becomes the largest file here. Big sigh. I’m not even done yet T-T. The reason that I’m so pissed off is I found another bug that I can’t even explained what happened.

Some issue in incrementing variables

So in programming languages, if you want to change a variable by some amount you would run (I’m just gonna explain in pseudocode)
x = x + 1
And this is what you would run (or x += 1 or x ++ or ++x but you get the idea).

So in Goa, you would run

SET (x ADD (x 1))
Basically, it sets the value of x to the sum of x and 1. However, when I run this, I get ERROR: Undefined variable: ADD. However, when I run
SET (x ADD(x 1)) with no space between the ADD statement and the arguments, it works! I have no idea why I can put a space after the SET statement but not after the ADD! I need to check through my tokenizer and parser to see where it is, but the closest issue I can think of is that my code is looking for the next character after the statement, not the next character after the first whitespace.

Devlog 4

wow I feel like i’ve coded a lot today cuz im jet lagged

Anyway, on to the actual devlog!

If loops ACTUALLY fixed this time

I noticed in the last devlog I posted an image of everything I worked on, like if loops, light mode, nested commands, etc. However, I realized that the output had 4 statements instead of 2. What happened was that the program produced both the outputs for the ELSE IF block AND the ELSE block. That’s now fixed by ensuring that blocks are skipped if the block above them is true. (Also something else I noticed in the screenshot was that the second line of the first IF block actually has an error - whoops, guess I suck at my OWN coding language)

Also, I got bored and started working on the README

It now has a description of the language, example code, and some examples of functions. I’m probably gonna work on it more later though.

Favicon added

There’s now an icon on the tab. I also renamed the code editor from “Goa Language” to “Goa IDE”; although IDE is an overstatement for something as basic as mines.

Devlog 3

I have fixed major bugs concerning the basic workings of Goa.

Attached below is a screenshot showing all the fixes and new additions in one program.

First, nested commands now work.

Fixing nested commands

Commands like RETURN (BASE (MAX (MULT (ADD (INPUT SUB (INPUT 5)) EXP (2 3)) MIN (10 20)) 2))
now work! I had to add a recursive parser. The old system was based on string splitting, which does not work for nested commands, and caused the system to read nested commands as arguments instead of different commands.

If commands now work

When running If statements in Goa, an error would come out, saying that “handled is not defined.” This is because handled was being declared outside the scope of the function that it need to be in. However, if, else if, and else statements should now work.

Return statements now return values on different lines

I forgot to list this in the commit, but now when you use multiple RETURN statements (like in a while loop or printing out multiple values), each value will print on a different line in the output. Originally, each number would print on the same line, separated by a space. This happened even though I added “\n” to the end of each number. I fixed this by changing the tag that held the output from to to hold pre-formatted text.

Light mode added

Hooray! Light mode now exists for anyone who wants to burn their eyes! I just chose the opposite color for every color on the page. However, I’m not sure if I like the idea of using white lines to divide sections instead of something like dark gray, as white seems like it stands out too much for being a divider. Other than that, I’m pretty proud of how it looks.

I’m not sure if I added this in a previous devlog, but saving and loading works.

You can now save to browser local storage, save to a .goa file on your drive, or load a .goa file :)

Things to do in the future

Firstly, obviously documentation. It is the last thing to go before the basic skeleton of the editor is done. Secondly, I want to add more functions to Goa. Thirdly, I am considering adding string and float compatibility, but I’m not sure yet. Fourthly, I need to save the user’s choice for light/dark mode to localstorage. Finally, just for fun, I want to solve a Codeforces problem with Goa (just to prove that it can work).

Devlog 2

I have finished coding the basic structure of the code. It uses parentheses in a lisp style, so the function is not connected to the parentheses. In the screenshot attached below, you can see a basic function that converts numbers into binary. Users will be able to add, multiply, divide, subtract, mod, abs, min, max, and use random numbers. There will also be while, for, and if loops. Comparators work, and comments use hashtags. I plan for Goa to basically act as a customizable calculator, as it only supports integers (I may add string support later). You can use it to automate boring actions ( cough like a binary worksheet in your Intro to Software Class). I’ve also added saving to localstorage and saving to files (it saves to a .goa file :)).

Known Issues

Nested commands do not work

As of right now, simpler commands like RETURN (ADD (INPUT INPUT)) do work. However, long nested commands like RETURN (ADD (INPUT ADD (INPUT INPUT))) do not work. I am yet to find out why. Probably due to problem 3 (look below)

If loops do not work

For some reason, For and While loops work, but If loops don’t. I don’t know why yet.

Commands that require only 1 argument throw back an error of needing 2, like ABS. RETURN doesn’t throw back and error, despite only needing 1 argument but using the same logic as the others. However, an error is thrown back once the RETURN statement gets really big, like RETURN (BASE (MAX (MULT (ADD (INPUT SUB (INPUT 5)) EXP (2 3)) MIN (10 20)) 2)). I’ll check it out later.

Change theme has no functionality

It’s not that it doesn’t work, I just haven’t implemented it yet :3

Devlog 1

I’ve been wanting to make a coding language for some time now. I want to make a language that can be easily learned. It’s not going to be that powerful, but I want it to basically allow anyone to repeat math functions.

I have finished the basic outline of the UI. It was heavily influenced by the USACO IDE (as you can see in the screenshot below). It gives a basic outline to the features that I want to build. First, on the left half of the screen is the area where you can code. It is basically a big textarea input. For the input area, this is where people will put in inputs for the code. Same thing here, it is a textarea input. Finally, there is also an output area. Right now, there is just a placeholder, but that will change later.

For the navbar at the top, there are 4 buttons. The first is a link to the documentation. I plan to build another website for the documentation, and I want it to be really easy to understand. Next is a “Save to browser” button that will save the code to localstorage. Next to that button is a “Save to file” button, which I plan to make the website download a .txt file to the computer. The “Load file” basically will allow users to upload code to the website.

That’s really it for now, I’ll come back when I want to explain how I plan how the language will work!