Platformed banner

Platformed

34 devlogs
206h 2m 20s

An in depth platformer with a fully functioning level editor, online level sharing, and trigger system, built from the ground up in Javascript.

This project uses AI

NONE OF THE CODE WAS WRITTEN BY AI. I used ai to teach me new concepts, then I used those concepts to create new features, meaning I wrote the whole thing myself. All the assets were made by hand in figma/piskel.

Demo Repository

Loading README...

Steve

I added 3 new color schemes, along with an update to two others!

  • Blue is now updated and looks great if I do say so myselft
  • Black and white
  • Updated Cream
  • Mahogany
  • Midnight

Added a new Tileset!

The idea for this tileset was to have as much contrast as possible, and a lot of interesting shapes. I think it accomplishes that goal quite nicely.

I’m also continually working on changing over images that use the <img> tag to use a mask-image instead so there are still some throughout the site that are off.

Attachment
Attachment
Attachment
Attachment
0
Steve

Things I worked on

  • Spent ~45 minutes refactoring ui.js to be more readable and well organized plus a bunch of comments that look like ai (trust they’re not)
  • Working on loading images from a tileset
    • made a function to create a spritesheet from the current tileset
    • made a function to load that tileset
    • need to update the ui to load the correct spritesheet
  • added a control to switch which page of levels you’re on (before you couldn’t view more than 50 levels)
Attachment
1

Comments

RespectableDot

bro i was your day one, nice job!

Steve

Color Scheme Stuf

  • I added a coffee color scheme that looks lokey kinda good

  • Updated the server to automatically serve the files with data-theme already set for no glitchyness on load

  • Updated a lot of svgs around the site to use mask-image so I can update their color

  • Now it’s super easy to add another theme!

  • Also added pages in the level share in case there are more than 50 levels

Attachment
1

Comments

kashsuks
kashsuks 1 day ago

very very very coolio!!

Steve

I did a lot of rewriting of css colors to use css variables, and now you’re able to choose your color scheme! Also It looks a lot better than that disgusting tan I was using. I now have some functions that will automatically rewrite the :root variables into a specific color scheme. I also did some annoying work using svgs as mask images instead of <img> tags so I can change their color. Lots of tedious work, but worth it!

Attachment
Attachment
0
Steve

Things I worked on

  • I now use the slack API to fetch the username for hack club sign in
  • Fixed some trigger bugs causing different triggers not to function correctly
  • Updated the top bar with undo, redo, and help icons
  • Updated the markdown file explaining trigger script
Attachment
0
AVD

Tagged your project as well cooked!

🔥 AVD marked your project as well cooked! As a prize for your nicely cooked project, look out for a bonus prize in the mail :)

Oliver

Tagged your project as well cooked!

🔥 Oliver marked your project as well cooked! As a prize for your nicely cooked project, look out for a bonus prize in the mail :)

Steve

Shipped this project!

Hours: 183.91
Cookies: 🍪 5207
Multiplier: 28.31 cookies/hr

I built a working platformer from the ground up in Javascript! No libraries, no game engine, just javascript, which was hard because I had to manually do camera logic and collision detection. Math. I also created a whole working trigger system with a custom coding language, TriggerScript, that you can use to code triggers, with working if/else statements.

I also made a whole backend for it so you can upload levels you make to the server where anybody can play them (there’s an option for private levels). The backend has a login feature so you can come back and edit the levels you made that are associated with your profile. Full Level Share!

I’ve made about 5 complete levels on it and I really enjoy making levels with it. There’s even a whole selection feature that lets you fill, erase, and move Whole sections of the map.

Steve

Trigger script now fully works!
Hack club Auth also works!
I worked on a new level called boxes and tidied some stuff up for the ship!

Attachment
0
Steve

Things I worked on

  • Finished (for the most part) Trigger Script
    • Function to compile a trigger json into triggerscript so you can continue to edit it after you apply it
    • If/Else now works
    • Added fill command so you can fill from (x1, y1) to (x2, y2)
  • Added Hack Club Auth for sign in
  • Better menu open/close logic so two menus don’t accidentally open at once
Attachment
0
Steve

CREATING TRIGGER SCRIPT

Trigger script is a minimal coding language that can be used to code what a trigger should do when the player touches it. It can be used instead of the ui to create triggers and includes more features such as if/else statements. I’ll work on documenting it soon, I promise.

Other features

  • Added an item to the menu that lets you copy the link to your level
  • Refactored a bit of editor.js to be less sloppy
  • General polish work
  • fix(ing) menu open/close to work better and less janky
0
Steve

Things I worked on

  • Added an option for instant teleport in the teleport trigger
  • Fixed some issues with filling the selection
  • QOL features (mainly fixing bugs)
Attachment
0
Steve

This update mainly focused on polish.

Things I worked on:

  • Rewrote a bunch of movement code
  • Fixed up some input bugs
  • You can now move around with a trackpad
  • There’s an option to toggle highlighting of where a trigger will teleport you
  • Added a win screen
  • Added usernames to the level share

P.S. check out my commits if you want to see the nitty gritty details.

0
Steve

Things I worked on:

  • selection box that you can use to:
    • fill the selection
    • move the selection
    • erase the selection
    • rotate the selection
    • You can also move the camera around by touching the edge of the screen while dragging a selection
  • Gamepad support + fix analog stick not working on mobile
  • Better zooming capabilities and ctrl+zoom
Attachment
0
Steve

Very fun update, lots of features

  • added ctrl+z and ctrl+shift+z undo/redo functionality (currently only works with placing tiles)
  • added functionality to sort the levels by their rating, date created, plays, and finished with a dropdown menu
  • added a loading screen to the level page
  • added a small time where control is limited when you hit a wall in the air to make walljumping easier
  • added a half spike block that takes up 1/4 of a tile
  • added a trigger function that you can use to change a block at x/y to a different block (which is very fun to mess with)
  • Created a level to show off the trigger’s capabilities Trigger Happy
  • added working mobile controls
  • added sign tiles to help direct the player
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
0
Steve

Things I worked on

  • Functioning minimap that you can click on to move the camera
  • use the middle mouse button in the editor to move the view
  • rotate block with a trigger
  • added mobile controls (not done yet but the main functionality works)
  • added a Fullscreen button to the level page
Attachment
0
Steve

Things I worked on

  • I added a better better interface for making triggers
  • You can now teleport with a trigger
  • There’s now a bottom bar that displays useful information such as selected tile name and id, and the x and y position of the cursor
  • The triggers execute the list of functions from top to bottom, making a bunch of possibilities
0
Steve

Major feature update!!!

I added triggers! currently the only thing you can trigger is toggling red and blue tiles which alone gives mountains of possibilities. I’m working currently on adding more things you can trigger. I have the functionality already not for just multiple things you can do with a trigger but steps for a trigger to execute when it is triggered consisting of multiple different mechanics.

Upcoming Mechanics:

  • Delay
  • Teleport
  • Rotate block
  • Spawn enemies
  • Play a sound
  • …And more

another big thing:

I added level previews to the browse page so you can see the spawn of all the levels!

Attachment
0
Steve

Things I worked on

  • You can now rate levels
  • Fixed an XSS vulnerability that my friend found
  • Edit/Remix level on level page
  • Level settings link on level page
  • updated the tile placement to fix some bugs with the onePerLevel functionality
  • Working search functionality
  • R to respawn in editor
  • probably some other stuff I forgot about
2

Comments

CoolBean
CoolBean 25 days ago

yay im in this one

Steve
Steve 25 days ago

yeup

Steve

wheeeee 100 hours

Here are the things I worked on:

  • I added a level meta page where you can edit the name, visibility, and description of the level
  • Updated the authenticate function in auth.ts (backend) to get the cookies automatically so I don’t have to do it every single time
  • I added more options to the my levels page; edit, view, delete, and settings
  • I fixed the sounds being requested from the server every single time they play
  • The editor will now ask you if you really want to leave if you have unsaved changes
  • Level Names will now get cut off with a nice ::after background linear gradient

I should really create a favicon so I don’t get an error everytime any page tries to fetch it

Attachment
Attachment
Attachment
Attachment
0
Steve

I did a bunch of things this time.

I updated the my levels page so you can delete levels, view levels and edit levels.

I updated the editor page so you can now open any level out there and either remix it if it’s not yours, upload it if you haven’t yet, or update the uploaded level.

Attachment
Attachment
Attachment
0
Steve

I thought I’d devlog again to give you an actual feel for what the site looks like. I did do some work though, I updated the level page (again) to load the level correctly and fixed level loading in the editor that I broke.

Here’s some photos of the site so far:

Attachment
Attachment
0
Steve

I added a level page that fetches the level data from the API and then (should) load that into the page. Currently the fetch works and the level works, but I’m having trouble with loading the level data. I’ll fix it when I get home from school.

I also added a level browse page that fetches from /API/browse and puts the levels on the page (max 50). Each project links to it’s corresponding page, e.g. platformed.com/level/123.

Right now my database isn’t hooked up to my codespace so I can’t really show the functioning browse or level page sorry. Search bar doesn’t work either..

Attachment
0
Steve

I worked a lot on the api this time around and got it somewhat working. I’m serving both the pages and api with bun, on my friends server. Right now I’m having some trouble getting the set cookie headers to work in bun. I also added a register page that does about the same thing as the login but with a different api request.
Backend is fun. (at points)

Attachment
0
Steve

I did a bunch of painful work refactoring code (5 hours worth of it). Now my code does the exact thing it has done. The only thing it did was change 1500 lines of code to several different files. Never again.

After that I did some work and added a login page. I’m also working on serving the actual files with bun instead of github pages. I just got static file serving working.

Here’s the login screen so it looks like I’ve been doing things

Attachment
2

Comments

Steve
Steve about 1 month ago

nevermind it didn’t upload right. Maybe I haven’t been doing things.

Steve
Steve about 1 month ago

oh it did work

Steve

I added a way to upload a level, along with delete a level. These levels were all made through a post request.

Attachment
0
Steve

I did a lot of research into bun and postgresql and made a working REST api with login and register endpoints, as well as level browse fetching a specific level. There’s currently no way to upload a level, though I do have the level table set up.

Highly recommend backend dev this is too fun.

Attachment
0
Steve

Features Added:

  • Better tile swapping functionality (space actually kinda works now)
  • Added a barebones enemy
    • enemy can kill the player by touching it on the side
    • player can kill the enemy by bouncing on it
    • enemy switches directions when it hits a wall
    • enemy has full physics
    • enemy doesn’t yet have a

I’m working with a friend on the backend for the level share with bun js.

1

Comments

Steve
Steve about 1 month ago

yikes that heading is huge

Steve

#Things I worked on

  • Added two new tilesets that you can choose from
  • Updated walljump to be better
  • Added camera transition to respawn point on death
  • Worked on a couple levels
  • Added a delta time function
  • Fixed the delta time function
  • Fixed the delta time function
  • Fixed the delta time function again
  • You can rotate bouncepads, leading to some…interesting situations
  • You can now change the zoom level for your level
Attachment
Attachment
Attachment
1

Comments

Steve
Steve about 2 months ago

you can probably tell which one somebody else designed

Steve

I added a bunch of new mechanics including:
an actual player sprite with a walking, jumping and falling animation, each facing either left or right.
Walljump (will add a menu option to toggle)
More tiles including:

  • Cactus
  • Bounce Pad
  • Crate
  • Coin

Upcoming features:
Keys and Doors
Enemies
Lava/Water
Moving things (saws, platforms)
Editor Minimap
Level Share (eventually I don’t know much backend)

Attachment
0
Steve

I added a bunch of new features, including:
making the start, end, and checkpoint flags do things,
making spikes work
adding another layer to the map file on save that saves the rotations of things like spikes
adding a menu with working tabs, styled sliders (which were a pain to get right)
tweaking how the jump and speed values are calculated

Attachment
0
Steve

I added an actual play mode and tweaked it’s movement and stuff. I gave it things like a coyote jump where it gives you grace for not jumping at the precise right moment off an edge.
I also added more tiles, including two spike variants and some flags for level mechanics such as checkpoints.

I adjusted the camera where it only moves if you hit the left/right/top 25% of the screen. I set the bottom one to 50% so you can see more of what’s below you.

Inside the tileset JSON I have a mechanics list where I can put different mechanics such as “killOnTouch” and so on. That’ll make it easy to add features later on. Going on the theme of the tileset, I also changed how that works so I can now have more than just a filename for each tile. I have type, name, id, file, triggerAdjacency (yes that does what it says it does), category, and mechanics right now.

Next up: change the menu to show categories and add some more keyboard shortcuts!

P.S. If anybody’s wondering press P to play the level and then again to go back to editing

Attachment
Attachment
Attachment
1

Comments

RespectableDot
RespectableDot about 2 months ago

I like the art, very nice👍

Steve

I fixed the adjacency so that
a: the tiles around it are automatically adjusted
b: you don’t have to click it twice to place two tiles, you can just drag

1

Comments

Steve
Steve about 2 months ago

Pay no attention to the audio I didn’t realize it was recording

Steve

Tile adjacency works now! currently it doesn’t update the tiles around it but it does work if you click on those tiles too. Gonna work on calculating it all on file load next along with updating the tiles around it.

Attachment
0
Steve

The editor moves, along with stuff being able to be placed in it. There’s currently no way to change the selected block though. I’ll take some inspiration from other platformer editors for that one.

The main thing I worked on is a function to resize the level. Since the level is stored in an array with no sub-arrays for the row it was quite hard to work out the math to add/remove more rows/columns. lots of tiles.splice.

Attachment
0
Steve

I’m working on a system to automatically switch the tile variant based on adjacency to other tiles of the same type (or any tile other than air idk yet). It works with a 4 bit string with different bits being flipped for different sides. that binary converted to a number is the variant that is used, chosen from a tile strip as seen below. Top is 1, right is 2, bottom is 4, and left is 8.

Attachment
1

Comments

Steve
Steve about 2 months ago

oh yeah also placing things in the editor works now

Steve

I set up a map reading/writing system using json and also editor movement. nothing else works but I got a lot of base functions in place. The editor is loaded automatically and you can move it around with the wasd. 👍👍

0