Clojurians Log v2

Cool! Thanks for playing and the feedback, really appreciate

wanna improve the way of doing games with clojurescript, maybe put togheter some workflow with threejs + rapier + blender + cljs

great game! i got stuck after the "see more" ability. love the art style, music, and movement!

It could be something on Phaser's side. The only camera tweaks I made were these ones: https://github.com/rafaeldelboni/zero-to-hero/blob/main/src/game/level.cljs#L231-L236

About the wonkyness, maybe it's because I'm using extruded tiles?

I had some problems with some tiles leaking over others by one pixel depending on the camera position, then researching about it I discovered that is a very common problem with tiles vs engines

https://github.com/rafaeldelboni/zero-to-hero/tree/main/resources/source/assets/tileset

The arcade physics is horrible btw, maybe the fact the ground is static and the rest is dynamic objects could cause this.

> About the wonkyness, maybe it's because I'm using extruded tiles? Nah, that can only cause (or solve!) issues at the edges of tiles. I think it's also something with Phaser. Or the web in general. Regarding jitter in general - I remember experiencing something similar due to everything being low-res. Regardless of extrusion, 0.499999999999 and 0.5 round to different values, and with low-res everything it will mean that the position of something can switch between 0 and 1 without it actually changing. Going to a higher resolution where even the smallest pixel is actually something like 10x10px would probably hide everything. Any jitter or "wonkiness" would then be 1/10th of what it is now.

makes super sense, but is sad, it's super easy to work with low res

I remember copying phaser official examples and adding follow lerp on the camera and seeing the jitter

without any lerp the jitter goes away (in my case)

I think that if you want to go low-res, you would also be better off with switching to integer math. But no idea how to make it work with physics. NES games didn't have that. :D Well, at least I can't recall any.

Well neither do I, but I saw a recent game made for NES that have some impressive physics https://morphcatgames.itch.io/bobl

Oh, interesting.

Just played it a little bit, very nice game and sounds, Rafael! Vai com tudo!! ahueehuaue

An interesting issue in the game that I've seen with, I think, play-cljc as well - when the camera moves, sometimes the square blocks more a frame or two behind the ground tiles. I wonder if it's Phaser-specific or some weird limitation of rendering the game in a browser.

Adding (-> tileset .-image (.setFilter Textures.FilterMode.NEAREST)) fixes it, I think. However, the tiles are juuuust a bit wonky now. Although, after looking a bit closer, they are slightly wonky without that filter. By "wonky" I mean that separate pixels can sometimes be not square. Another interesting problem is that stack boxes tend to jump a pixel. No idea what that's about, maybe physics-related.

Awesome!! Yeah, vybe is just for desktop, so you aren’t missing anything ahahaha keep going!!

There is a spike path down where you get the ability, with a heart right in the entrance :) Not super clear level design

i see! i was too scared to go down that path haha. went back and finished the game!

@rafal.wysocki The argument from requestAnimationFrame is ignored as we are using three.js's clock.getDelta(). I would probably write this code differently today as the partial could be replaced with #(animate eng callback clock) or something cleverer.

BabylonJS

I think for many types of games SVG + React can be just fine. Probably not for a shooter with 1000 things on the screen, but for calm puzzle games or what-have-you it works well. I did some experiments with Reagent and SVGs a while back: https://chr15m.github.io/motion/ (click around in the interactive ones to see animations) I think it would be cool to build a tiny game engine around this concept. As for doing it with dom elements, Rogule is built like that (Reagent again) and it works great. Again because it suits that type of game. Like others here I had some success tinkering with this three.js and ClojureScript demo a while back: https://infinitelives.github.io/px3d/ Of course these are just demos and there is a lot more to a game, but definitely for a large category of games basic browser tech is good enough.

@rafaeldelboni Wow, I didn't even notice that the message above my question is rather close to what I'm asking. Would you recommend Phaser + CLJS?

I'm also looking at https://www.cocos.com/. Claims to support hot code reload with JS and Lua, so potentially a good match.

I dabbled a very tiny bit with Cocos2D for an iOS thing many years ago (using Objective C). It was nice. I think Cocos may be what it has grown into. Hot reload support could also be in the way. Like hot refresh in React Native can be tricky to disable reliably. (At least some years ago, I haven’t been following lately.)

🙂 well yes and no, yes when you want that does everything for you link importing spritesheet, json export from tiled, sprites, sprite animation, sound and etc... But everything is tightly couples and is hard to eject and use other stuff. The worst thing I found in the entire lib (apart from the OO aspects) is the physics engine, I saw later that you can switch between both from the default one (bad) and another called mater, but I was super advanced in the development and I couldn't make the switch. So if I was going to use this stack again I would first try with this mater physics engine.

Thank you both for sharing! My wife and I want to try making a game and the choice paralysis is real. :D

I dunno if my code is a good ref, but it's open source if you want to check out https://github.com/rafaeldelboni/zero-to-hero

There is this article as well I read sometime ago https://clojurians.slack.com/archives/C8NUSGWG6/p1737558935107279

I know how it feels @p-himik hahahaha

I have been thinking about making a JS game-engine that uses DOM/svg as the renderer. You know, given how nice it is to make web pages with React or any other JS. I initially thought about using Phaser but the library itself felt kind of odd. If you are going engine-less I would recommend using Rapier ( https://rapier.rs/ ) via WASM as the physics engine. I am using Typescript these days (not sure if CLJS can use TS types for code-completion) but the experience has been really nice. I've done some stuff with Godot before and Rapier clicked with me really quickly. Rapier docs are pretty nice. The only problem is that your physics world lives its own life and you need to figure out how that will coexist with the way you render things. That's the price of going (game)-engine-less route, I guess.

> SVG I would definitely advise against that. The performance of SVGs in browsers is still a random-ish nightmare.

Is it really that bad? I was considering going for that 2D svg aesthetic and interweaving DOM behavior into the game. You could call that a questionable choice but the idea is still at its infancy and so far it seems to be good enough.

My idea is partially inspired by https://r3f.docs.pmnd.rs/getting-started/introduction in which you interact with three.js the same way you use React to manipulate the DOM -- you define 3d scenes via JSX. I guess I could always fallback to canvas/webgl (via Pixi.js) if the regular SVG rendering is unacceptably slow.

It's not bad, it's horrendous. A few months ago I was debugging audio stuttering on a web page - turns out, it was due to a few SVG spinners.

But why not just use three.js then? I only briefly experimented with it, but I was actually comparing it with DOM manipulation. I made the clickable background animation for my wife's website: https://anyamaryina.com/ It's done with three.js, but I also tried to implement "hairs" with plain divs - it's just not comparable. Slower, harder to make it look exactly the way you want - blending, transparency, antialiasing, they all looked... off.

I referenced that repo not because of three-js but because I found it cool that react-reconciler has been adapted for other purposes than UI rendering. If you think about it, 3d-scene manipulation has quite a few parallels to DOM manipulation and it feels more productive to define scenes declaratively instead of imperatively making the relevant objects and adding them to the scene.

Impressive, I wonder if is it possible to compile it using squint, and if yes what the difference in performance would be.

From JS space I would consider three.js for 3d and PixiJS for 2d. I experimented a little with three.js and clojure it was quite easy to use it there. Although I didn't build nothing big

> three.js for 3d and PixiJS for 2d Heh, that's exactly what https://github.com/4ian/GDevelop already uses: "The game engine, written in TypeScript, using PixiJS and Three.js for 2D and 3D rendering (WebGL), powering all GDevelop games." But after a bit of experimenting and pondering, I'll probably eschew the browser for now and keep tinkering with LibGDX. It's my first foray into games, apart from superficially playing around with different engines, and at this point it feels much more comfortable to approach the whole thing just like yet another Java app that I can fully interact with from a REPL and modify piece by piece without having to reinitialize the whole game and without having to rely on a game editor that just isn't comparable to a modern IDE.

Yes, hot-reloadibility is real (also a non-gamedev here, just starting)! Also, you have a much bigger world to leverage from when desktoping, C libs, Clojure/jvm debugging tools, Clojure/jvm libs, memory sharing etc, all of which are second class in js/cljs or even impossible to do. Downside is that’s not so straightforward to share… but we also run to risk of having nothing to share at all as the experience for ourselves will likely be less pleasant lol

Heh, true. I also remember playing around with Defold. Cross-platform and the editor is written in Clojure, so I thought that it would be awesome to tinker with it. Until I learned that it only supports Lua... I really, really don't like Lua.

Yeah ahahaha we could try using https://github.com/bakpakin/Fennel, but it’s still Lua ahahaha

Right, and then debugging would suuuuck. I already use Fennel with AwesomeWM, and it's much better for me than raw Lua, but it's still a pain.

Yeah, 100% agree I ended up with libGDX for my hobby game dev also

Are you using libgdx with any wrapper or just direct interop? The downside of not having web is that many jam only accept web releases

Direct interop, writing my own wrapper as I go, along with an increasing understanding of how things work. I'm not interested in jams so not that much of a deal for me.

After reading this thread I got interested in testing a stack of threejs + rapier in cljs (or squint) haha

How could you run clojure with libgdx project though? I also wanted to try, but then I stucked with Gradle and Clojure integration

You just don't use Gradle, that's it. LibGDX is a Java library, you use it like any other Java library.

@chris358 Looking at he code of the px3d right now. Wondering about this part from engine.cljs:

(defn animate [eng callback clock]
  (let [delta (.getDelta clock)
        {:keys [camera scene renderer controls stats]} @eng]
    (js/requestAnimationFrame (partial animate eng callback clock))