Wesnoth Canvas

The place for chatting and discussing subjects unrelated to Wesnoth.

Moderator: Forum Moderators

User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Wesnoth Canvas

Post by ancestral »

Wesnoth Canvas
A web site for displaying game maps for The Battle for Wesnoth.

You can view this live at http://mproud.com/wesnoth/canvas.

Image

See the project page:
Github Project Page


What is Wesnoth Canvas?
This is a web site for display maps for displaying game maps for The Battle For Wesnoth. Part of it is an experiment and self-learning to the wonderful ways of JavaScript, jquery, and web design. As I continue to work on the project, it will eventually be a place to create, edit and save maps — and perhaps more.

Changelog
Version 2 Build 8
24 September 2012
  • Started adding arrays of images for terrain. This is going to take time. During this time, the terrian may actually look worse as I haven’t “flipped the switch” so to speak, so the terrain will draw with the editor icon version instead of the nice‐looking version which I was using earlier.
  • Continued refining logic for drawing terrain transitions using a bitwise method.
  • Refined the cursor and made it so it appears in the entire window.
Version 2 Build 7
4 September 2012
  • Added new cursor. Not sure how I like it; may revert to original one.
  • Added transition map. This is the beginning for really drawing nice-looking terrain.
  • Minor formatting changes to terrain table.
  • Removed GPL license on images. (These are original works by me, after all.)
Version 2 Build 6
21 August 2012
  • Added names for all terrain codes.
  • Made status bar narrower.
  • Added name of terrain when a hex is selected.
Version 2 Build 5
21 August 2012
  • Fixed minor issue with status bar scaling on resize events.
  • Reformated README.md.
Version 2 Build 4
20 August 2012
  • Introduced Gentium fonts.
  • Moved most variables into an object to avoid unecessary variable pollution.
  • Implemented beginning of a status bar.
  • Hex updates now working, only redraws when hex changes.
  • Minor clarifications for licensing.
Version 2 Build 3
20 August 2012
  • Modified UI logic so map scrolls better.
  • Introduced nice border.
  • Created status bar though not fully implemented yet.
Version 2 Build 2
7 July 2012
  • Changes to key events.
  • Added support for an interactive console.
Version 2 Build 1c
5 July 2012
  • Moved out tBfW dependencies. You’ll need to download the game resources and place them on the server.
  • Changed index.html to index.php, partially for dynamic data directory support.
  • Altered canvases to include a viewport, and changes as the window resizes. This should hopefully help with performance.
  • Fixed various bugs.
  • Fixed path to hover hex images — finally.
  • Fixed path to starting position flag.
Version 1 Build 1
26 April
  • First entire upload of the project.
License
Files in the image directory are licensed under GPL Version 2 as per The Battle for Wesnoth project.
http://www.gnu.org/licenses/gpl-2.0.txt

Files in the font directory are licensed under SIL Open Font License 1.1.
http://scripts.sil.org/OFL

All other files are licensed under MIT.
http://www.opensource.org/licenses/MIT
Original Post:
Last edited by ancestral on October 8th, 2012, 11:09 pm, edited 14 times in total.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas Map Viewer

Post by ancestral »

I’ve updated the project so it reads virtually all hexes now.

At this point, the remaining thing to do is transitions. This could take some time, but the algorithm is relatively straightforward: check previously read neighboring hexes and draw transitions according to that. I also have some work to do with updating the terrain table data object.

Feel free to take a look. Note that this is only working with Webkit-based browsers; my aim is to eventually get Firefox working, and then maybe Opera and IE.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas Map Viewer

Post by ancestral »

Newest revision in trunk has introduced some new tiles, so I’ve included support with the map viewer.

At this point, I have a few different ideas, though I’m not sure which I should consider working on first here. I’d like to solicit your input on what you might be interested in seeing me work on next:
  1. Terrain transitions so the map looks prettier, just like in Wesnoth
  2. Map uploading tools so I can upload my map and see it
  3. Map editing tools so I can make a map and download it
  4. Support for my browser! I don’t want to have to use a Webkit-based browser
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
lipk
Posts: 637
Joined: July 18th, 2011, 1:42 pm

Re: Wesnoth Canvas Map Viewer

Post by lipk »

Support for my browser! (Firefox)
However, if I wasn't that selfish, I'd say 2. It'd be especially nice if you could make it possible to load maps from url, since there're some people who post their work on the mp forum as a text file, and I'm too lazy to download, place and load them just to see how do they look. (ohh, "if I wasn't selfish"... :D )
User avatar
Xudo
Posts: 563
Joined: April 3rd, 2009, 5:26 pm

Re: Wesnoth Canvas Map Viewer

Post by Xudo »

ancestral wrote:[*]Map uploading tools so I can upload my map and see it
This one looks better than others.
User avatar
Shinobody
Posts: 391
Joined: March 9th, 2011, 5:46 pm
Location: somewhere in Poland

Re: Wesnoth Canvas Map Viewer

Post by Shinobody »

Support for one of most popular browsers used doesn't sound selfish to me, it sounds more like necessity (and I'm saying this under Chrome, I just hate having to switch browsers to look on something...).
Though 2. sounds like must-have, too (to be of any actual use);
I'd put transitions on bottom of the to-do list, since it sounds most time-consuming and unpractical (it seems like only Cave Wall and Chasm terrains really need it, IMO).
Artist, writer, game designer for hire.
Art portfolio: https://shino1.artstation.com
Writing dump: https://shino1portfolio.wordpress.com/
My itchio for video games and TTRPG stuff: https://shino1.itch.io/
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas Map Viewer

Post by ancestral »

I like idea #2 also.

So I went ahead and registered a couple domains for a map bin site. Think Pastebin but for maps. Heck, while we're at it, why not have a Pastebin for Wesnoth with WML syntax highlighting. (I'm a little ahead of myself here…)

Keep in mind this is just an experiment, and that nothing is functional as of yet.

http://wsnthb.in/

Image
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas Map Viewer

Post by ancestral »

I have a usable "Wesnoth Bin" for code snippets with proper WML syntax highlighting. There is still some work to do: copy-paste within the code window still has some minor bugs, and there may be a minor input bug with IE. Otherwise, relatively recent releases of Safari, Chrome, Firefox and Opera should all work. Feel free to test it out if you'd like.

Next to do is enable the shortening algorithm so these bins can actually be saved. I'll hop back to the map bin and get that going as well. I'd like to have an art bin — we need a repository for this kid of stuff.

Next week is looking good for core functionality.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
Ceres
Forum Regular
Posts: 620
Joined: September 18th, 2010, 7:56 pm
Location: Germany

Re: Wesnoth Canvas Map Viewer

Post by Ceres »

I like this :D
There's just one problem I noticed: things like <b> are omitted by the syntax-highlighted code, but left in by the original code. This leads to messes like this:
pangoerror.PNG
pangoerror.PNG (9.29 KiB) Viewed 17179 times
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas Map Viewer

Post by ancestral »

Hmm, you’re right — good catch.

It looks like I need to <pre> the whole code window and avoid copying that to the mirror (what you see). parse the code window spaces and line breaks more meticulously. But it’s definitely fixable.
Last edited by ancestral on June 3rd, 2012, 8:45 am, edited 1 time in total.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
lipk
Posts: 637
Joined: July 18th, 2011, 1:42 pm

Re: Wesnoth Canvas Map Viewer

Post by lipk »

Works like a charm with Firefox, however, I'm having a strange problem on Chromium 18 (which is quite ironic, because I installed that only to have a browser compatible with this awesomeness :P ). It seems as if there were two layers of text, one with syntax highlighting and one without. Tabs in the colored text are ignored, so there's an offset between the two layers too.
Here's a screenshot:
wesbin.png
(note: the uncolored text has double indentation compared to Firefox, so probably those missing tabs do exist, just in the wrong buffer)
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas Map Viewer

Post by ancestral »

Back to maps.

I’ve updated the page slightly so you can paste in your own code and it will update automatically.

Still well aware Firefox isn’t playing nicely. I’m pretty sure it has to do with image preloading. I’m working on a solution.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
Gambit
Loose Screw
Posts: 3266
Joined: August 13th, 2008, 3:00 pm
Location: Dynamica
Contact:

Re: Wesnoth Canvas Map Viewer

Post by Gambit »

Very cool and worked perfectly in Chromium 18.0.1
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas

Post by ancestral »

Alright, I’ve just finished what I’m calling Canvas 2.0.

The biggest thing is… Firefox Support!
Also, the canvas auto-resizes to the window. Use the arrow keys to pan the canvas; perhaps I can add mouse panning later.

As always, more to come.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas

Post by ancestral »

Small update.

Map scrolling is quite a bit better and there’s a nice, resizable border. (Remember to use arrow keys to navigate.) Still working out the multi-canvas logic. Also, auto-populating and auto-hiding the map code after initial load.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
Post Reply