dwarf fortress tileset issues colored squares

#Dwarf fortress tileset issues colored squares code

Remember to listen to onResize events and modify the width and height accordingly. To find out the number of lines and columns you need to output, you should check the window width and height and change it accordingly.

#Dwarf fortress tileset issues colored squares code

On-screen displays use slightly modified code page 437 characters inġ6 different colors implemented as bitmaps, rendered with OpenGLĮdit: because I got some comments I extended the answer a bit So even Dwarf Fortress itself uses the approach I described. Even when not using a browser but a normal application there are issues with text rendering. For normal websites pixel-perfect text isn't an issue but in games like Dwarf Fortress a few pixels can lead to an extremely incoherent view. Even when embedding a font and using some CSS magic browser and usability settings can still override and alter it. This approach makes sure no strange stuff happens when people are missing fonts, or are using a very different language (Chinese, Russian).įonts and texts are one of the most difficult thing to get pixel perfect in all locales on all browsers. Rendering to some target element using your own built in sprite font as if you're rendering a normal 2D screen.

I think the most effective way would be just to fake it. If you want a complete package, this might the way to go. It is specifically geared towards roguelikes as it comes with e.g. Using only WebGL will limit user base and it is complex to implement (Unicodetiles has an automatic fallback mechanism).Īnother library, which I've heard suggested a lot recently is rot.js. If you decide to make your own library, I'd still recommend using canvas because it seems to perform better, allowing bigger scenes. In practice, even the DOM renderer is fast enough for most purposes. Note that the linked performance tests can be pretty extreme, changing every character every frame.

WebGL, which uses a canvas-element to create a font texture and then renders using WebGL, which is even faster and very scalable to big viewport sizes, but not as well supported in browsers.

This is much faster, and there are performance tests to back that up:

Canvas, which draws the characters using the element.

DOM, which uses a matrix of elements to render each glyph with a customizable foreground and background colors.

I have actually made a character display library for the web, Unicodetiles.js, which I have not only spent some time optimizing, but it also explores different ways of presenting the text it has three renderers:

Certainly some amount of javascript is going to be necessary.Īre there javascript libraries or canvas libraries out there that fit this use case? Another technology that I am not aware of? Anyone know of any examples of websites that have done anything similar to this, so that I can crib ideas from them? I'm aware of though I don't know whether its capabilities fit this use case. But for creatures/animals and things that can move, I'm not sure what technology solutions would be most effective. Probably some of the background/immobile tiles could be loaded statically. Though not that I'm not looking to acheive this scale, I'd probably start of showing a quarter of this content or so at any time. With moving creatures, mobs, npcs and pcs. So essentially, a dwarf-fortress map in the browser: I'd like to build a webapp for my game website that involves using text characters to represent animals and people, and have them move around on map squares with independent (server driven) AI.