Forum

> > CS2D > Maps/Editor > CS2D Map Viewer
Forums overviewCS2D overview Maps/Editor overviewLog in to reply

English CS2D Map Viewer

13 replies
To the start Previous 1 Next To the start

old CS2D Map Viewer

DC OP
Admin On Online

Quote
I started a little side project a few days ago: A CS2D map viewer written in Rust and Macroquad. It's entirely open source.

You can get the project files at GitHub https://github.com/UnrealSoftware/cs2d-map-viewer
The source code is licensed under MIT so feel free to do with it whatever you want. Assets are excluded from this license!

The map viewer runs in browser but can also be compiled to native binaries for win/linux/mac (I only tested win). It has no UI yet and scrolling via mouse is still bugged (if you release outside the canvas the release isn't registered). You can also scroll with WASD and arrow keys and use shift/alt to modify speed. It also runs in mobile browsers but touch scrolling isn't implemented yet.

Try it here. It just loads de_dust2 by default
https://www.unrealsoftware.de/cs2d_map_viewer/

As you may note some things are not implemented yet. e.g. tile animations, tile blending or the entire light engine in general. See details about the state. Native resolution is currently fixed to 1920x1080. I'm using letter boxing to make it fill the screen as much as possible.

So far I'm quite happy with the size. The WASM build (engine, rendering, etc) is less than 700kb and could probably even be reduced a bit more. Some JS glue code is also required, that adds like 40kb on top. Macroquad can load assets directly from the webserver. I optimized this by simply putting everything into a single zip file which is downloaded and extracted to a virtual file system. I'm not very happy with the performance. Even with this basic rendering and without light engine it already drops in FPS on lower end devices, especially on mobile. There is still some room for optimizations though.

It also supports loading custom maps from the file archive. it's still a bit annoying though:
• Find a custom map in the file archive
• click download to go to the download page
• copy the link on the download button, it should look something like
1
https://www.unrealsoftware.de/get.php?get=FOO&p=2&cid=BAR
• open
1
https://www.unrealsoftware.de/cs2d_map_viewer/?file=FOO&cid=BAR
(replace FOO with the whole zip file name including the .zip extension and BAR with the cid numeric value)

It then should load the first map file it finds in that zip and also use all the assets in that zip properly. Be aware that this is still very prone to errors. e.g., if the tileset is not included in the zip (or is one of the default tilesets), it won't work. The screen will stay black and the browser console will be spammed with errors. Also I did not include all default assets in the zip yet. So some sprites which are typcially included in CS2D might be missing on custom maps.

Why am I putting time into this?
I explain it in the GitHub readme:
Quote
- Previewing CS2D maps on the web is nice. Plan is to embed this into the CS2D file archive at www.unrealsoftware.de
- Providing an open source example for loading and rendering CS2D maps
- Evaluating a new tech stack and testing what works in browser and how well it performs
edited 1×, last 20.05.26 08:02:26 pm

old Re: CS2D Map Viewer

EngiN33R
Moderator Off Offline

Quote
This looks really cool. I'm curious to take a look at the Rust code, as I have long tried to break into Rust for game dev. Curious to hear what your experience has been like with Rust and Macroquad in particular.

old Re: CS2D Map Viewer

necrashter
User Off Offline

Quote
Nice work! Hopefully, having an open-source example for loading CS2D maps will be helpful for the community.

Adding to EngiN33R's question: According to the README, you have considered using raylib with C but decided against it because Rust is safer. However, raylib provides Rust bindings. Why did you decide against using raylib + Rust? I think raylib has a bigger community. As a result, it may be more stable and perhaps produce smaller WASM builds, which appears to be one of your primary concerns.

old Re: CS2D Map Viewer

DC OP
Admin On Online

Quote
Thank you!

@user EngiN33R: Getting used to Rust is a bit painful. The borrow checker principle is something new. But once you understand it, it's kind of ok (just kind of because in some cases you have to work around its strictness and also there is no ternary operator). What's nice about Rust is that it is quite easy to set up. Also because of the strictness you encounter most issues while programming already. Once the code compiles chances are high that it works or at least doesn't crash.

Macroquad is cool. I like it for its simplicity and direct drawing. It has some issues and limitations though. There's no spatial audio for instance. Also I had to mess with the JS binding code to get rendering to texture to work and in the end it turned out that render to texture is relatively slow in Macroquad web builds. I ended up with a fixed size canvas instead which basically leads to the same result but without the performance overhead (for this to work I had to modify the binding js code again because there's some canvas scaling magic in there). Since standalone builds have no canvas I still have to render to texture for those to support flawless up-/downscaling. Otherwise there would be black lines between tiles (something which actually even happens in CS2D under certain conditions).

@user necrashter: I checked Raylib with Rust when I did my research but it's using emscripten under the hood. This makes it bigger than Rust with Macroquad. Probably like a few mb compared to less than one mb with Macroquad. I didn't test it though. Another reason is that it is slightly more complicated to set it up according to the description. For Macroquad I just had to install Rust and configure Cargo.toml properly.

old Re: CS2D Map Viewer

mrc
User Off Offline

Quote
Looks cool. Feels like this could become a base for some pretty interesting stuff in the future besides just map viewing.

old Re: CS2D Map Viewer

DC OP
Admin On Online

Quote
@user mrc: Yes, letting this evolve to more than just a map viewer is an option. I'm still evaluating if it makes sense to do so with this tech stack.

Tiny Update:
Added tile FX today. So now the water is moving (you have to look closely to see it).
Currently this breaks Macroquads batching which is bad for performance. This could be improved later by baking all regular tiles and all animated tiles into one big texture. Since Macroquad supports shaders I could also go away from the static pre calculated textures and use shaders to do the wave effects. This would also break batching though.

old Re: CS2D Map Viewer

necrashter
User Off Offline

Quote
DC has written
...also there is no ternary operator...


Technically correct, but since Rust is an expression-driven language, you can use an if-else expression instead of a ternary operator in almost all situations. Note that if-else is a statement in many languages, but it's an expression in Rust. For example:

1
let status = if age >= 18 { "Adult" } else { "Minor" };

You can also use a match expression (if expression works better for boolean conditions but match may be better if you have a more complex data type with more than 2 branches):

1
2
3
4
let example_str = match condition {
    true => "condition is true",
    false => "condition is false",
};

old Re: CS2D Map Viewer

DC OP
Admin On Online

Quote
@user necrashter: Thanks for sharing. I'm already using the first one. The second one looks very much like the switch expressions I know from C#. That's cool. Would still prefer a simple ? : op because it lets you achieve the same with less noise. I mean 
let status = age >= 18 ? "Adult" : "Minor";
looks slightly cleaner and more readable to me.
Also kind of annoying that there's no ++ and -- but I get why. Writing += 1 or -= 1 instead is ok. But that's all just nitpicking. Overall, I like the Rust syntax.

old Re: CS2D Map Viewer

DC OP
Admin On Online

Quote
We now have tile blending and animated palm trees
Also touch scroll works better now (a bit slow though).
You may have to clear your browser cache and reload the page to get the latest version.
edited 2×, last 23.05.26 12:41:59 pm

old Re: CS2D Map Viewer

Hajt
User Off Offline

Quote
Its cool to see a clean Rust + Macroquad running directly in the browser

Just a small suggestion regarding the WASM build. If you want to ensure the output is browser‑only - no Node.js paths, no fallback shims etc.

For Emscripten:
1
-sENVIRONMENT=web -sSTRICT=1

For Rust+wasm‑bindgen:
1
wasm-bindgen --target web

If u apply these things usually u'll get smaller output and no mixed‑environment glue code.

old Re: CS2D Map Viewer

DC OP
Admin On Online

Quote
@user Hajt: That won't work with Macroquad because it's already using a custom minimal JS binding script to keep the size low. Neither Emscripten nor wasm-bindgen is being used.

I already have optimizations in place. Not sure if there are other ones which would make sense.
https://github.com/UnrealSoftware/cs2d-map-viewer/blob/main/Cargo.toml

Unfortunately I didn't manage to run the wasm-opt tool successfully yet because of some bulk memory stuff. In theory it should allow me to reduce the size even further.

Edit: Okay, works with --all-features flag. But wasm-opt only saves me like 70 kb (basically no difference between -0s and -0z levels). Still something.
edited 3×, last 24.05.26 08:03:02 am
To the start Previous 1 Next To the start
Log in to reply Maps/Editor overviewCS2D overviewForums overview