It's interesting how an aesthetic can make an emotional impact and draw a lot more interest.
Explaining stuff is so hard! In fact, this entire article is just me trying to explain what this is in the shortest way possible.
Maybe the shortest version is: 90s.dev is an API around a 320x180 web canvas, designed specifically for making games and game maker tools, with sharing capabilities built-in, and an innovative GUI for making game maker tools quickly and easily.
No, that's still too vague. I give up.
90s.dev simplifies making games and tooling for game creators via:
- an expressive API around a 320×180 web canvas,
- built-in sharing capabilities,
- an innovative GUI.
Each bullet would link to a relevant part of the documentation. I think you also need a page with examples.
https://en.wikipedia.org/wiki/Animal_Well
(In fact I partly made this app so I could make an Animal Well clone.)
Would it technically be possible, without too much difficulty, to increase 320 x 180? Just wondering!
I didn't document this because I'm not sure it's the right decision. Allowing screen resize does make it more flexible, but also leads to decision paralysis for most users, who 320 x 180 is probably perfectly sufficient for.
That was one of the genius moves of pico8, which tic80 failed to capture: offering the perfect set of orthogonal parameters for you, so you can just make stuff.
Remember OG twitter and someone complained about the 140 character limit. Imagine the reply was "ok fine we'll let you use more than 128 characters, but you have to click an 'advanced' tab." instead of the "be clever" retort we really got from Jack Dorsey. Immediately there'd be no constraint at all, just an annoying step where you had to click an annoying checkbox.
Point being - if the design is intended to be constrained, then it's perfectly reasonable to own that.
Also he said "but also leads to decision paralysis for most users", but it does not have to be the case. Default can be whatever you want.
As someone who is not involved in game development I admit I didn't really understand your description about it being an API but not a game engine. But keep going, you're doing a great thing here.
You can click them on the desktop-thing when you open the app.
So far the only finished app is fontmaker: https://90s.dev/os/#sys/apps/fontmaker.app.js
Their source code for all built-in apps are in https://90s.dev/os/helloworld.zip (found on https://90s.dev/getting-started/download-sdk.html)
The back breaking not quite square trinitron monsters were the best.
For example, here's a very early (mostly broken) prototype of 90s.dev
Because of 320x180, it can fit the code editor and the mapmaker or spritemaker on the screen at once, and each tab is big enough to be usable.
I basically wanted to make a much more usable pico8 for game prototyping. Hence the 320x180 design, and this prototype: https://90s.dev/v1/ But I also wanted the full convenience of VS Code, including full type checking and autocompletion support for TypeScript. So I designed it to be a platform that can be used to make and publish the things that pico8's tabs contain.
Now I see that I released this much too soon.
Thank you everyone for the feedback. It's clear that I launched this far too soon.
I'll work on the pain points you all noted, and come back in a few months.
I love it.
In fact, I think my Refs might be a genuine breakthrough in compsci, mainly because of .defer(), and I half want to write a doctoral thesis on them just to see if anyone else agrees.
Definitely launch often.
10,000 iterations. One down. 9,999 more to go.
I tried in both Firefox and Chrome on Linux and picking colors and clicking I can't draw anything. No logs in the console that alert something is wrong.
On a different note I think you've captured the 90s really well. I had a moment of realization that the 90s really were like this. On first look I was thinking this was more 70s/80s terminals. Looking forward to seeing where you take this.
Also thanks, that's exactly what I was going for! I wanted to capture the fun and excitement and raw power of creating GUI apps in the 90s (but without all the inconveniences). Hence the name 90s.dev
- [x] Add canvas with semi-transparent background
- [x] Make canvas resizable by dragging corner (min 1x1)
- [x] Show grid on canvas if grid button is checked
- [x] Make zoom adjustable by clicking and dragging zoom number up/down
- [x] Show selected color as square over canvas during mouse move
- [x] Allow click/drag to change square colors
- [x] Right-click/drag to erase squares
- [x] Support loading/saving bitmap
Hopefully I can finish it while this comment is editable! :D
As features are added, you will see them in the source code. Either:
1. Click the top-left button and click View Source
2. Download helloworld.zip from Downoad SDK and view /fs/sys/apps/paint.app.js
3. Open https://90s.dev/os/fs/sys/apps/paint.app.js in an incognito window
These all show the same live copy of the source for the paint app. The reason for the incognito window is because the service worker compiles TSX to JS at runtime.
[1] https://90s.dev/os/#sys/apps/paint.app.js
[edit] Ha, I did it! I got all the features working before the edit button went away! But it was about 2 hours, not 1. As a bonus I'll try to work on undo/redo.
One day this February, I just got up at 2am and started writing code. I was tired of waiting. So I wrote and wrote and wrote.
That's cool. It makes me feel happy reading this, kind of inspiring :)
I found myself making an API for making game maker tools and a game engine and a game. It turns out I’m an API designer at heart. I guess I always kinda knew this.
I like hearing when someone finds their passion and goes for it full throttle.
I failed to capture the essenence of what my project is. The APIs are really what's exciting. But you can't see APIs, they're like the wind, you have to see them in action, through their side effects. I should have waited until I had made more things that show off how innovative these APIs are. I released it too soon.
Anyways, thanks for pointing me to picotron! Think I'll have to keep an eye on both projects.^^
1. I've downloaded helloworld.zip to my local computer, I think. 2. I open the filer.app.js by clicking the link on the webpage. This open a 90s.dev instance right on the page. 3. Then i'm supposed to mount helloworld/app as app and click it, so i click the mount button, it asks for the drive name, hi put in helloworld/app and click mount but nothing happens.
I must be missing how you're supposed to get helloworld.zip into the 90s.dev instance... how do you upload it into the instance?
You're likely using Firefox, right? This feature relies on showDirectoryPicker which Firefox doesn't support. You'd have to use Chrome for the getting started guide.
Also, the drive name shouldn't have a path. Name it something like "foo". I'll udpate the guide to reflect this. Then foo/helloworld.app.js will point to /some/local/path/helloworld.app.js, as long as you mounted "foo" to point to the directory at "/some/local/path"
process.ts:159 SecurityError: Failed to execute 'showDirectoryPicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker. at askdir (process.ts:154:37) at port.onmessage (rpc.ts:103:10) askdir @ process.ts:159 await in askdir port.onmessage @ rpc.ts:103 filer.app.js:129 Failed to get folder: error, cancelled, or using Firefox.
[1] For about a week (and at the time of posting) the app was on 90s.dev/os/ to avoid this exact CORS error. But I got tired of how it forced me to name my github repos or pay for my own server, so I moved it back to os.90s.dev, which has the one downside of the error you ran into.
Could you find a work-around to support firefox as well?
Unfortunately when it comes to mounting drives for faster local development, there's nothing I can do until FF supports `showDirectoryPicker`
However, you could just load up a local file server in your local directory (python -m http.server 8080) and import your file directly:
import 'http://localhost:8080/index.js'
You'll have to use filer to create the file and edit it by right-clicking, then type it in and ctrl-s to save or use the top-left menu button.
I'll add all of this to the website under some "Using Firefox" page or something, for people who can't stand Chrome.
In the console I see:
Failed to load ‘https://90s.dev/os/fs/run? code=H4sIAAAAAAAACk2QMW%2BDMBCFd%2F%2BKa4QEKAiiKlMVs1Rqlw4dmy0GjsSNsRE2TVKL%2F16DSYq3d3ef797jTas6A6zlCVgIEnhFabBL4L1TfbtP4IMVKGb5BQPUnWogzJTOHJN%2B65AQdmF8%2BiJtOxR9hfqNS65PWBFSKqkNlKqXBigE0SaeS1yWrhDFQHPfTn%2BY6HG9vjMtkyjcyP%2Fv%2BqbThp3xc%2BxEFiRr8AVWJxRCwUV1olrBkBCAnTcBmv8itXc0GOUABSvPR%2BdGVtRurtvp1fWQO86R3jYcWUvtdi668pQCGLwaGi72PYWQPWbmiCb0%2BYG6RtEboyRocxNIQ90XDTchsNJwJal1QQx5KXh5hgZ3mR9e0IvV1gfFKtaaSI7JHSYQKwisHMDwBvUhHhZHZf6q2Z1X%2B1HtMh9STmJCpqzTWpW99uHGfz0j7XEYAgAA’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: Array(...).keys().map is not a function’.
I like the idea of designing sprites etc. right on the system, reminds me of messing about on SEUCK when we were kids: https://en.wikipedia.org/wiki/Shoot-%27Em-Up_Construction_Ki... my brother found and uploaded one of his experiments years later: https://www.youtube.com/watch?v=1i8UhseK260
Looking forward to your WC2 clone!
Actually I am planning on shifting it towards importing 'https://' URLs directly.
Honestly, the main difficulty I have is keeping full TypeScript support of remote modules. It's actually easier to do this if I import https:// modules directly, though it's not as convenient as it could be[1].
But I'm also trying to figure out whether I should continue to compile TSX to JS in the service worker[2], which requires no special dev-time setup and allows publishing raw .tsx files anywhere on the net such as github, or require users to compile TSX -> JS ahead of time, which would require a build step.
On top of that, I'm considering going further and making it so packages can import bare-specifiers like `import "somelib"` and publish a plugin to compile this into an https:// import specifier.
[1] https://stackoverflow.com/questions/79628025/is-there-a-way-...
[2] I currently use a service worker to map imports like `/os/fs/{ghb,npm}/...` to `jsdelivr.net/{gh,npm}/...` and compile them and return with the right content-type.
That's part of why I made my app into a platform where you can build apps but also share apps, libraries, and game assets. I can't make a game all on my own! I'm hoping people make and share spritesheets with this, after someone makes a spritemaker app of course. I'll keep working on my basic one.
Based on https://90s.dev/getting-started/hello-world.html, it seems like JSX meets pico8. Is that a decent description?
Maybe you could have a little walkthrough of how to build a mini game with it?
The current method of building a game is the same as the walkthrough for building an app[1], except you make a custom view and override its draw method. For higher performance, you can create an OffscreenCanvas and draw into it however you want. There's no API to wrap WebGL2 more conveniently than this yet.
I definitely should and will wirte a guide that takes you from nothing to a full fledged game. But right now, the guides are all geared towards making apps, since before we can make games, we need to make gamemaker tools, like spritemakers and mapmakers.