Graffiti:
A little WebGL Graffiti demo/game I made for everyone to play with.
- Up to 20 people can use it at once
- Everyone can see what you are drawing live
- Art is stored permanently
- mouse, keyboard, touch and some controllers supported
- Steam deck or windows downloads below
Details:
This is a little game/demo I made with Unity that primarily focused on using WebGL and seeing what I can do with it.
I experimented with WebGL in this case, because WebGL makes an application accessible to everyone on any device.
It uses some assets I already had rights/licenses to use, which were purchased from various places (Unity Asset Store and Booth.pm).
It uses PhotonEngine for it's syncing backend.
It uses php on this server for it's persistence.
I may switch up the music with any music I am provided with.
Will this ever be on steam proper? Probably not. If a proper steam version were to be made, I'd want more allowed CCU's for PhotonEngine, which requires a paid service.
Or I'd want to roll out my own web socket system, which would require a bit of work. (Not too much, but more than I want to right now for a demo).
And finally I'd want to make it more than one area, with multiple lobbies to go into and paint on.
So I guess if a lot of people took interest in this, I would explore new ideas and ways to expand this as a product, right now it's a tinker toy.
Take a Peek:
As each file is persisted, a jpg file is also generated out of the bytes. Because of this, I was able to make a preview page for the entire graffiti board.
Click here to take a peek!
Controls:
The menu is always controlled by touch/mouse input.
Keyboard+mouse
- Escape: Toggle Menu
- WASD: Move
- QE: Adjust Height
- Left Shift: Run
- Space: Slow Mode / Precision
- J: Jump
- H: Hud visibility
- Mouse: Turn
- Left Mouse Click: Spray
Gamepad
- Auto run (cus stick)
- Left Stick: Move
- Right Stick: Look
- Left Trigger: Precision
- Right Trigger: Spray
- Left/Right Shoulder: Height Adjust
- Map/Back/Select: Toggle Hud Display
- Pause/Menu/Start: Toggle Menu
Touch
These are pretty straight forward and all have icons on the screen. But here's an explanation of a few not so obvious controls:
- You can click the Hamburger to toggle menu.
- You can use the eye icon to change hud visibility.
- You can use the slider on the right to adjust your height.
Okay, cool, let me play it
OK - click here to
play online
(Web GL Version)
Downloads
The builds were mainly designed to work for the Steam Deck. However, it'll work on each respective platform. For Steamdeck, I would highly recommend downloading the Linux build, as, well, it's the native platform and won't need proton to run.
- Linux
- Windows
- Mac - Due to Apple's anticompetitive practices, I can't make a build for Mac without owning a Mac or using Unity Cloud build, which I'm not paying for.
Source Code
If you would like to view just the source code of this project, you can view that here:
https://git.vreml.org/skuld/graffiti-zone/
The assets are mostly 3rd party and cannot be shared.