I'm making a small RPG and I need feeback regarding performance
jslegenddev.substack.com
jslegenddev.substack.com
This post was intended for my existing audience and I didn't expect for it to be posted on HN.
Anyway, now that it's here, feedback on performance is still very much appreciated!
The reason I'm not making this web playable despite being built using web technologies is that I'm targeting Steam for this game. Therefore, I need to make sure the game works well when installed as an executable on Mac, Windows, Linux.
There was already trust established between me and my audience so that's why it felt appropriate to tell them to download executables.
I understand why HN users not familiar with me, would be wary of downloading random executables from the internet. It's a good instinct to have!
If it runs on the web, it should run the same as an executable, otherwise your exporter is broken. I would likely debug on the web first (just to get access to chrome dev tools including the profiler and performance meassurement tools). Is there some way to do comfortable debugging/profiling with the way you export via GemShell?
I'm working with a partner on a steam game and it was the most rational choice we could arrive at. Our goal is to make enough revenue from the this project to justify another one. We seek to make a living doing this.
I struggle with the lack of advocacy for effective tools on this platform. If we are being honest about the overall engineering proposition, the trade of moderate, unknown capitalist exploitation risk for platform targeting stability might actually be worth it if the goal is to get the game into the hands of as many players as possible.
Electron/Tauri/whatever is just the start of the battle. You also have to consider different input, storage, etc., systems if you want to hit targets like Steam Deck - which is a huge deal for visibility these days. The web is a nasty abstraction layer once we start talking about things like Xbox controllers.
As some of the other comments imply that there are some performance issues; more than using a profiler, I would make sure that your mental model of the event loop from your framework is correct. If all you're doing is moving some sprites around the screen, you need points where your code pauses because it has nothing to do. This could either be awaiting something from the framework, or putting most of your logic in callbacks that are triggered by the framework.
A different way to say it: Between frames, there's not that much calculation that your game needs to do when you're just moving a few sprites around in 2D. The event model that you hook into should be something where your game does its calculations, and then waits between frames.
> As some of the other comments imply that there are some performance issues
Because there's nothing implied and they experience perf issues first hand? TFA:
> I’ve been experiencing performance issues
> I’m using a Macbook Air M3 with 16GB of RAM
Using one of the singularly most powerful personal computers ever made. It's probably not the machine if they don't notice everything else being unexpectedly bad too.
A real example: MacBook Pro m4 will have absolutely god awful performance on certain web based games * (compared to windows or even android), regardless of the browser or any browser performance settings. This is not the hardware explicitly, obviously it’s a very high performance chipset, but it’s definitely the hardware in terms of what the OP is asking. Because that particular hardware is falling down all over the place in this scenario when others are not.
Fixing it? Sure that’s almost certainly on the games side, some kind of inefficient process or element that doesn’t work right in that environment and needs to be hammered out or replaced.
But for diagnosis? Yeah, “it’s the hardware” is the right answer. And you can’t fix it without diagnosis.
*replicated on latest chrome, Firefox, safari, and Brave, with the games: Idlescape and (now dead)osrsIdle ~8 months ago
Uhh .. wut?
The game appears to be similar to a point-and-click adventure game, which were popular in the 80s, and ran just fine.
In 1988, a CRAY Y-MP supercomputer had "64 megawords of memory". I have no idea how large a word was on those machines, but by todays standards, that means 128MB. Let's go with that. The Y-MP was the size of two massive fridges.
Now, the Macbook air OP owns, which is smaller than a toaster, has 128 TIMES as much memory in it as a supercomputer did back in 1988. Similar story for processing power, storage, etc. Point and click adventure games haven't changed all that much, and even back then didn't require a supercomputer to run.
> But for diagnosis? Yeah, “it’s the hardware” is the right answer.
Given the above, how you came up with this is beyond me.
It can be very dependent on hardware generation, too. One of my past projects was a very simple, photosphere-based learning environment. Photosphere rendering is incredibly simple. But on Intel processors with Iris Xe integrated GPUs used by one particular year of iMacs (I don't remember which, it only impacted 2 users and it was several years ago), I couldn't use the standard cube sampler because it was just broken. I had to split my photospheres into 6 cube faces and render 6 quads separately to be able to use the not-broken 2d sampler. The issue didn't appear on any other generation of Iris Xe on macOS and it didn't appear on any generation of Iris Xe on any other OS. It was very specifically the combination of macOS and that generation of GPU.
Which is software, not hardware. Just not the software written by this dev.
Yes, video drivers are, generally, buggy and unreliable. The hardware they're hooked up to is fucking amazing.
Also, I can 99.9999% guarantee that this guys' problem is not a driver bug, so trying to nerd-snipe me with "but driverzzz broroooooo" is pedantic and annoying. The guy is drawing like 100 quads; it should run at a bazillion frames a second on literally a toaster.
I'm curious about this. I always had the impression, mostly from reading Shamus Young, that there's no such thing as drawing something other than a triangle.
Blender guides tell you to divide your model into quadrilaterals. Though I did find one reddit post saying "I imported this model from a console game and it's all triangles. I thought models were supposed to use quads." The answer was "that model is finished, so it's in triangles because that's what you actually draw".
What's going on? Is there such a thing as drawing polygons with more than three sides? Why is the current advice "use quads" to the point that people don't even realize they're drawing triangles?
The advice about using quads I'm not sure is really a tautology. I tend to work with quads until one of the quads is non-planar then I cut it so that when I bring it into a game engine the import/bake step doesn't triangulate the mesh in a way I didn't want it to.
maybe under the hood past the drawcall it will triangulate it. never bothered to look into that.
pretty sure the HW doesnt care one bit as it operates on vertices... not primitive shapes. (ofc like u note if ur quad is non planar it wont look like u expect but thats no concern for the driver or hw..)
Now, software modelling packages can represent geometry in any way they want, as long as that software package can somehow eventually transform that representation into triangles for the GPU to rasterize to pixels (barring custom software rasterizers).
My comment referred to quads, but at the end of the day, a quad is 2 triangles. Same goes for arbitrary polygons. The GPU speaks triangles.
GPUs rasterize triangles because they are a primitive type with very convenient properties: rasterization requires only a few basic math operations per pixel and triangles can never overlap themselves in projections, which quads can.
It's generally tempting to assume the mesh data that is edited in a DCC tool (Maya etc.) as the same as what is rendered. This couldn't be further from the truth because they need to be in completely different representations. For example, vertices on UV map seams need to be duplicated for rendering, but that would make editing the mesh extremely unwieldy. So the datastructures are totally different.
that all being said. it is very easy to write bad code for games or use old features etc., we're all guessing unless some of you put a profiler and debugger to it... if so , show the money.
I guess I just wasn't willing to assume OP was basically incompetent and hadn't already done a basic algorithm review if their post about not being able to debug this issue made it this far.
A game like this should be running for like 1000+fps and this point should be emphasized in case the maker of this game is clueless when it comes to this kind of stuff, as his blog suggests (sharing an executable with users and asking for a recording is not how you would debug this perf issue) And it's totally fine if they are clueless, we all start somewhere. What sucks is derailing comments like yours that do the opposite and pretend that there is a conversation to be had here other than the implementation is probably terrible, which is, again, completely fine if it is, and we can talk about it and help them with it or point them in the direction of good resources about this stuff.
sorry for the rant, I just see these "akshually theoretically it could be due to blablabla" type comments on HN so much lately and I hate them
this is also a reason why there are so many gfx driver patches which fix specific games...
its usually not the hardware but driver issues.
also, its infeasible for a solo dev to test on a plethora of platforms and device/driver combos, so any feedback from random internettians about performance can be really helpful to prevent breakage on platforms not available to the dev to test on.
> Using one of the singularly most powerful personal computers ever made.
Some arbitrary PC Master Racer: "Hold my beer, and I will show you a powerful personal computer." :-)
For example, I would create a game fight scenario where the player has infinite health and the enemy just attacks super fast at some settable rate. That way you could monitor whats happening in extreme abnormal conditions with the hypothesis that if the game works in extreme conditions then it will work in normal conditions.
Another example. If you have random encounters like in old school JRPGs then I would create a scenario where a fight happens per step of the player, the fight loads, then the enemy immediately dies, rinse wash and repeat. That should allow you to asses how the game performs after 100s of fights quickly.
The idea here is to create tests that improve your signal to noise ratio. So you create a scenario that will create a large signal so that then you can more easily diagnose the performance issues.
And, as others have mentioned, if you really want to know, profile.
I’d try digging into this first. Try to completely disable VC and see if there are any slowdowns before you run out of memory. Go from there.
https://kaplayjs.com/docs/guides/optimization/
Assuming it's capable of running in your browser, I'd suggest using chrome's dev profiling tools to help with finding the optimization areas. Based on feedback from everyone else, sounds like something is not cleaning up as the game keeps running.
When profiling, it can often be useful to compare profiles of "working well" versus "not working well". So you could record a 10 second timeline when things are going smoothly, then a 5 second timeline when perf is bad - things that jump out on the second timeline are worth looking at.
On Gemshell’s store page (https://l0om.itch.io/gemshell) it seems they’re in turn using Neutralino JS, which should be using a Webview, like Tauri.
Second, let me introduce you to my good friend, the profiler. A profiler is an absolutely indispensable tool for making games. Find one that you like, and learn to wield it with laser-guided precision.
Generally, there are two things you want a good profiler to tell you about; execution speed, and memory. Finding a profiler that tells you about execution speed is pretty easy (basically all of them at least nominally do that), and finding one that also profiles memory (in a useful way) is somewhat harder. I'm not sure of the state of profilers for Javascript, but maybe the tool you're using (KAPLAY) has one built-in?
From my long-forgotten days of programming javascript, one thing you want to look out for (which is difficult to spot without a profiler), is creating memory leaks. Memory leaks in Javascript can be a double-edged sword; you're both using more memory than you should, and the garbage collector has more pressure on it. Over time, this can bring an application to a crawl as the GC spends more and more time traversing leaked objects.
Good luck friend. It's dangerous to go alone, take this :sword:
(and I don't see how performance could be an issue unless a major screw up, but like others have said, use a profiler. Sounds like memory leak from what was shared here)
What kind? It would be helpful to know what you're experiencing, attempts you've made to fix, etc.
Or is this a thinly veiled "I've been working on this for a while and it's taking longer than I thought and want some encouragement." Which is fine! It's a great thing to ask for.
We do need to scale based on screen size though - copying pixels around is expensive.
But a low-end machine from 10 years ago should be mandated for all developers.
If you have a friend who is encountering the performance problems enable profiling report export and ask them to send that over to you. Hopefully that'll show you what is taking so many cycles.
Completely unplayable. It runs fine at first, and then suddenly drops to below 1FPS for no discernible reason. This happens regardless whether I am on the world map or combat scene. I am running the exe, couldn't find the browser version.
On an unrelated note, I am surprised to see a JS program working without the usual 200MB NW.js runtime (as seen with RPG-MV)
More info here, if you're interested : https://jslegenddev.substack.com/p/export-web-games-for-desk...
./Small-RPG
libEGL warning: DRI2: failed to authenticate
VMware: No 3D enabled (0, Success).
libEGL warning: egl: failed to create dri2 screen
VMware: No 3D enabled (0, Success).
libEGL warning: egl: failed to create dri2 screen
** (WebKitWebProcess:2822): WARNING **: 14:52:20.184: The GStreamer FDK AAC plugin is missing, AAC playback is unlikely to work.I have played games that didn't performed so well because they were so fun. Games are about fun, anything else (narrative, performance, sound...) is secondary.