Hacker News Reader

Comment by onion2k | Hacker News Reader

An example of what can be done with it - https://melongaming.com/games/melonjump/ (hold the left mouse button down and move your mouse to play).

More here https://www.melongaming.com/en/Games

View on HN

Just a bit of friendly feedback. On my Android phone, the game didn't work in Firefox or Firefox Focus for me (the browsers I use normally). Music sounded good and initial screen looked good, but touching the screen had no effect. On Samsung Internet it worked fine. If MelonJS is handling the mouse/touch events, maybe all games are affected.

The thing I noticed with most JS game libraries is their inability to display text without being slightly blurry. Is there a fix to the issue?

I noticed this in the game you linked as well.

I think in the past I've fixed this by doubling the resolution. More precisely - detecting device pixel density and setting the canvas size based on that.

Are you playing on a phone or using a high DPI monitor? By default HTMLcanvas (which most game engines use to handle text) does not take into account high DPI scaling (I would guess due to performance).

This isn't inherit to JS game engines, but I will say text quality is not usually something that game devs focus on unless text is important to their particular game.

Here's an example of a workaround to render more crisp text https://github.com/danman113/gfx-utils/blob/main/src/canvas/...

The text is blurry for me even on a standard DPI monitor that just happens to be large. For some reason the canvas resolution is still significantly lower than the display resolution and then being stretched.

I think canvas kept the "1 px is 1/96th an inch as reported by the browser not a display pixel" convention primarily for consistency as that's how the px unit worked on everything else in the browser.

You can add high DPI support to 2d canvas by using scale

Tbh when making a web game you'd be better served using standard web UI in tandem with your game even if canvas text wasn't blurry.

Web libraries (react, etc) are very advanced and it'd be incredibly hard for a js game engine to match them for UI

"Web libraries (react, etc)" are just using HTML and CSS / the standard DOM for rendering instead of Canvas. You don't need to use any "library" to render in that way, it's built into the browser.

My most recent web game uses both standard DOM and Canvas for rendering different parts of the UI and text, and both look equally good to me. You do have to have set up the Canvas rendering correctly, especially for sharper displays like Apple Retina displays with higher pixel densities, but when done properly it looks very sharp and has no issue IMO.

Yup, but developer productivity with web library (e.g. react) > no library vanilla dom manipulation > canvas

Disagree; updating the DOM is incredibly slow and will kill your games performance.

As long as you don't read your writes and use transform for animations it won't cost you more than 0.5ms to 1ms per frame (could it be better? Sure. But developer productivity is important.)

I use react in my game platform bloxd.io - which I work full time on - and I couldn't be happier

Just took at look a bloxd. Pretty cool! I want to make my own io game. I think the browser game market is under served as far as quality games are concerned, and doesn’t seem saturated compared to all the other platforms.

Would you be able to give any advice on netcode/multiplayer solutions? I like working with low level rendering libraries (canvas, Kha/Haxe) but I am wondering if it is better to use an engine versus libraries, or even just rolling my own solution with web sockets?

no need to roll your own solution. If you want to ship a game, go high level :D

For web native rendering pixijs is good for 2d (and phaser is good also a good entry level). For 3d theres threejs/babylonjs.

There's also unity, which some browser games use but it has downsides on web (large build sizes for one)

None of the networking solutions will give you unreal engine netcode developer productivity (and that includes ones for unity). I use colyseus, it doesnt solve everything but will save you some work

Re saturation, it definitely depends on the genre, web is its own market. What type of game are you thinking of making?

Thanks for the advice!

I’ve heard of Colyseus and it’s good to know that it is a viable solution. I am keen to try out the Haxe library.

I’ve got some loose ideas for some 2D semi-realtime games. No solid ideas yet but I want to experiment.

Depends how often you're updating the DOM and how

I think you underestimate the performance difference of canvas! Also, WebGL

Look into msdf rendering for text in WebGL. https://github.com/Chlumsky/msdfgen

My guess is that this would be caused by rendering text into a canvas and then scaling the canvas to fit the window. That example is rendering at 640x960 regardless of the screen size.

Text rendering, manipulation, and searching, is one of the key issues holding back canvas adoption as a whole. The DOM is still king here.

Text rendering quality is not as bad as it used to be, pretty much on par with DOM. In any event, if you do not scale canvas resolution by devicePixelRatio, the result will be blurry on most devices these days.

This engine at least says it has "High DPI resolution & Canvas advanced auto scaling", so it might not have that issue.

Reminds me of the classic Orsinial Winterbells: https://www.crazygames.com/game/winterbells

Maybe you can also integrate the accelerometer on phones for a compact and more fun example?

This reminded me of my implementation for a university course where you played by tilting your head to the left and right with the help of an accelerometer embedded earbud. Everyone got nauseous after a couple runs but it was very fun indeed :)

These demos highlight the pro and cons of the various input devices. This melonjump game is much harder to play with a touchpad than with a mouse. The platformer demo isn't, but that's mostly a keyboard game. The whack-a-mole game is much much easier with a touchscreen than with a mouse or a touchpad.

That's a really fun game!

Another good one is Super Kaiju Dunk City. [1]

[1] http://radmars.com/superkaijudunkcity/submission/

Reply on news.ycombinator.com