next »

[Alain]

Dmg is a hard one to visualize, as some dmg is dealt with explosions. Explosions have a radius + falloff to zero on the edge of the radius.

I had the same problem when making damage icons. One of the thing that I always tell people is that in my game you don't have a sword or a shield, just potions. But I ended up with the icon for damage being a sword and for armor a shield

[marcgfx]

I too use sword(dmg), shield(armor), heart(lives). I changed this from the original release, it's just much easier to understand. But my issue is more with visualizing the dmg in numbers. Explosions can damage opponents in a larger area, so the radius is important too.

Progress.


I completed a new boss. At least for now. It's a big black invincible slug and an annoying spider. You have to kill the spider, but it tries to run and hide behind the slug. The image is from testing and I think there are two spiders hiding. The lines are debug info, the yellow line is pointing to a position away from the robot.


Attachments were placed in the same distance around the Devader no matter how many there were. This could look quite ridiculous. With very few adaptations of the code, they are now distributed a lot better. But it's never that easy, the change made it obvious that the attachments were clipping right throw everything else...


It took some work, but I think it's a lot more believable. Not perfect, but good enough I think.


An issue I've been avoiding for a long time is the screen edge. The world simply ends there. It feels a bit cheap, so I decided to try to find a solution (You can never see the brown edge, this was an early test). I wanted something rocky, but my experiments in 3D just never made it very far. I was trying to work with particles/emitters but could not achieve what I was thinking of. I did not feel like I had the right tools.


To avoid getting stuck and doing nothing, I ended up programming what I was imagining in Devader directly. Just using red dots. It doesnt look like much, but it gave me a good idea of what I wanted. I was thinking of transfering this to blender in some way, or even Unreal (I installed it, but my PC is too slow I think).


In a sleep-less night I came up with another idea. Why render, if you can use other tech... I was really happy with this result that I came up within about 2 hours.


First visualization came out really nicely too, but placement and scaling was still off.


This is where my trouble started and why writing your own engine can be a bad idea... at least when the engine is a one trick pony built for exactly what I wanted at the time. I just could not figure out how to get my output offset and scaled in the right was. Took ages of digging and understanging old code, but I did eventually figure it out. Not a clean solution, I must shamefully admit, but I will never tough it again. Right?


Pretty happy with the result


As the edge is no longer straight, I created a minimalist editor controlled with shift+key and the mouse cursor. I added hidden objects to resemble the shapes of the rocks approximately.


Building in the top can now be seen at full height and are no longer just chopped off.


Still some visual issues at the bottom I will need to solve...

[JobLeonard]

That murderswarm is glorious

"I am the bullet hell"

[marcgfx]

Thank you JobLeonard, might be a good elevator pitch


First version of overlapping stones. I messed up the scaling in Photoshop, only modified the x-scale... redo!


Second version: As I was doing it all over again, I decided to optimize space usage. Whoooops. I can see the robot and ring below... oh more stuff is shining threw. Damn, this won't work.

The robot needs to remain behind the stones, the cursor and nuke should be above. As they are all in one draw call, the rocks need to be within the same call. I will need the full width for the rock image and this will overflow my current texture atlas (4k x 4k). I would have to upgrade to 8k x 4k ... I really wanted to stay on 4k. Damn.


I alredy have two 4k x 4k textues. The background rocks still have some space at the bottom, so this is the other option. But I am not a fan.


Is 8k too much?

[JobLeonard]

> might be a good elevator pitch

Heh, that does sound catchy doesn't it? It sounds like the kind of thing already been used though

[marcgfx]

Bullet Heaven & Hell? Bullet Purgatory? Considering both player and enemies can be blasting a lot of bullets.

---

So I was a little stuck. But not for long. I had been using 8k all along, but my older mini PC is really only capable of 2k. That used to be my benchmark. Cuphead runs fine, so I felt it must be possible to handle more assets. I found out WebGL2 has something called sampler2DArray. It's something like a 3D texture. Instead of just two coordinates x & y, you can also specify a z value. Something like layered textures and you can select the layer with the z-value.

So with hope in my heart I rewrote my texture-atlas generator to split the data into 20 2k Textures. On the right (scroll) you can see the original 8k texture.


Getting this all to work in WebGL was another challenge. I was mostly looking at a black screen and error messages, but I finally got something other than black to see.


Made progress with getting things working, but the 3D texture just wasnt binding correctly.
ppt weDie 3D Textur klaiterhin nicht .... Es war ein kleiner Fehler beim Binding der Texturen. Ich habe ChatGPT Code generieren lassen als Vorlage. Am Ende vom Code wurde die Textur auf null gesetzt. Beim durchschauen des Codes wusste ich nicht genau was die Zeile sollte und hab sie gelöscht.


I had asked for some code from chatGPT on how to bind the sample2DArray. I was looking through the code and deleted a weird line, as I did not understand what it was for. Turns out the code reset the binding to null at the end. Finally back to the starting point, but this time with a 3D texture! As you can see, the robot is standing on the rocks.


Now I started working on what I really wanted to achieve. Placing the rocks. For some reason the robot was missing, turns out there was an issue in generating the atlas for some of the images. Some stuff is now behind the rocks.


I did not understand the required scaling for the rocks at all, so I simply adjusted the numbers to match what I wanted. Was pretty easy to do, thanks to edit and continue in Javascript. One of the things I am very very thankfull for. I am slightly overlapping the edges of the 4 rock textures to prevent visible seems. To make the visuals match the background, some adjustments to shader also needed to be made. Pretty smooth sailing. Current goal achieved.


The best thing about this whole change is that I am no longer limited to a single texture. I could also just add more when I need them. This means more space for animations, finally! Additionally the game should be able to run on more GPU's as I now only require support for 2k textures. VRAM is probably not going to be an issue. But I am a little out of my depth here, just an educated guess.

[JobLeonard]

Nice! Does it also come with a perf boost?

[marcgfx]

Nice! Does it also come with a perf boost?

Have not noticed any difference, but my PC does support 16k textures. GPU is not really my bottle neck anyway, it's mostly collision detection and my sorting/rendering preparation on the CPU. I am still thinking of ways to optimize my collision and rendering code, as I am worried all the new stuff could slow down older computers. But I should probably test first and see before I go and mess up working code.

[marcgfx]

Lot's of playtesting again and bug fixing... I noticed my framerate was considerable lower than what chrome was reporting. Chrome reports the frames itself is rendering, but not how fast the content it is showing is being rendered. So my framerate was around 30 what was a total mystery to me. Turns out I had a bug that registered the new rocks in pretty much every grid, so 1200 cells were doing 40*(40-1)/2 (handshake) collision tests... got that fixed and now I am back up to 60.


I had to add some more joy and enhanced one of my weapons with additional upgrades. It's possible to upgrade it past any sensible limit, but it seems that's something people enjoy. I found out my CPU has been around for 12 years, so it works for me... it should be ok.

[Alain]

Great to hear you got framerate back under control :D

[marcgfx]

It's kind of great that I am no longer so limited in my use of images. This has opened up a lot of new avenues and it's hard not to go exploring. One thing I have been wanting to do for ages was create new environments. In a way this was possible before, but by adding a surrounding area it has become a lot more interesting.

Of course I didn't just start using what I have made to the full extent. Instead I decided to create an oval arena, requiring a whole new batch of code. The red box shows the actual game area where collisions can occur. The blue lines kind of show the outline of the ellipse. Green lines are where I calculated the normals (fatter green line). Yellow and red are how an object would bounce off at that position.

It was not that easy to get working with my visuals, as I had not accounted for the wall height. I ended up using a weird y-scale of 0.7325 (I think) instead of the intended 0.75 not that anyone would care or notice. It was not hard, just a bit fiddly to get right.

[Alain]

The magic of eyeballing is an essential tool for all of us, I guess

[vdapps]

Hey nice progress! 

For xy-th time kudos to you for having such good looking game running in browser, moreover at 60fps. I know everything's accelerated now but I still it consider it quite an achievement.

Btw, I have question. In your last animation I saw it's animated WEBP, but for that quality it's very compact, just 5MB. What do you use for encoding? I use ffmpeg for my WEBP-s and it produce quite large files. My not so long animations are always north of 10MB and as my game is not so colourfull as yours, compression should be better in my case, but it's not, files are large, and when I lower quality of transcoding, then it looks awful.

[Sustrato]

The fact that your spritesheets aren't grid-aligned is insane to me.

But hey, I can't argue with the results. The game looks great! The backdrop variations and improved botling AI behavior look really good.

Hard to tell just how good the attachment flocking is with them flashing white - I thought at first that they were clipping through each other, and that it did not look good at all, before I realized it was some kind of status effect or powerup making them flash. With all the dust and chaos I think it looks reasonably convincing, but maybe post a gif without the powerups?