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

Re: Wesnoth Canvas

Post by ancestral »

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 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 5
21 August 2012
  • Fixed minor issue with status bar scaling on resize events.
  • Reformated README.md.
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.
I’m itching to try and tackle transitions once again. Ouch what a pain it is. If I can get it working, that will make a significant difference.

Feel free to join the conversation at the IRC channel #wesnoth-xp .
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
Celtic_Minstrel
Developer
Posts: 2166
Joined: August 3rd, 2012, 11:26 pm
Location: Canada
Contact:

Re: Wesnoth Canvas

Post by Celtic_Minstrel »

Suggestion: When your mouse is over a flag, show which player starts on that location.

(What does xp mean in #wesnoth-xp?)
Author of The Black Cross of Aleron campaign and Default++ era.
Former maintainer of Steelhive.
User avatar
ancestral
Inactive Developer
Posts: 1108
Joined: August 1st, 2006, 5:29 am
Location: Motion City

Re: Wesnoth Canvas

Post by ancestral »

Terrain Transitions
I’ll be exploring algorithms for drawing the terrain transitions for Canvas. Since this is all done with JavaScript and <canvas> elements, the Wesnoth codebase isn’t going to necessarily be of much help. So instead, I have the excellent opportunity to invent a new cleaner, simpler algorithm for drawing terrain.

Describing terrain relationships
Transitions are described purely by the terrain adjacent to a given hex. Each hex should have information of the terrain around it. There are likely many ways to quantify this; one such way which I will likely adopt is the bitwise technique.

Bitwise technique
Each adjacent terrain is defined by a number of a power of 2. The idea is, any combination of adjacent tiles will produce a unique number which we can reference before painting.

Image

Since we’re working in JavaScript, and I already use objects and JSON like with the terrain table file, sticking with key/value pairs makes sense.

So, take for example, a very small 3x3 grassy island map:

Image

Remember, we’re working with hexes, so when counting left-to-right it’s going to zig-zag a little.
Detail:
All there is to the technique is to step through each hex on the map and write the hexes adjacent to it. Then for each terrain code neighboring that hex, count up the values. Our 3x3 map will translate into this:

Code: Select all

{
  "0,0": {
    "Ww": 69,
    "Gg": 2
  },
  "1,0": {
    "Ww": 11,
    "Gg": 4
  },
  "2,0": {
    "Ww": 21,
    "Gg": 8
  },
  "0,1": {
    "Ww": 39,
    "Gg": 64
  },
  "1,1": {
    "Ww": 126,
    "Gg": 1
  },
  "1,2": {
    "Ww": 45,
    "Gg": 16
  },
  "2,0": {
    "Ww": 97
  },
  "2,1": {
    "Ww": 91,
    "Gg": 32
  },
  "2,2": {
    "Ww": 49
  }
}
Once values have been generated, we can step through each terrain, branch on the bits and paint the appropriate terrain. The good news is we can have multiple layers, such that the base terrain and the transitions can go on separate canvases, making it nondestructive, meaning if the terrain on a hex gets changed only one layer needs to be repainted.

More advanced code could be handled for multi-hex terrain. Large mountains appear in Wesnoth when there are several mountain hexes in an area. Adding another ring could be an option (128/256/512/1024 etc.), but better may be specific branching and redrawing instead.

Fog and shroud could be handled similarly, perhaps as their own JavaScript objects.

Overlays
Overlays can be done in a similar fashion by painting onto a new canvas layer. For example, castle walls are painted onto the terrain, as are villages, or flowers. The same technique can apply here with ease.
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 »

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 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.
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 »

Work continues. I’m getting closer to getting transitions working, but it’s going to be a lot of code, and I’m going to need to write and modularize more of this. After that, next step really screams out editor functions with the ability to save and generate a shortened url to http://mapb.in (eventually).

(It seems to me that shortened urls ought to have easier to remember urls. I think the sweet spot is combining 4-letter words (not dirty ones!) with two digit numbers; for example, http://mapb.in/46vine or http://mapb.in/grew70. I figure I can still get about 750,000 links.)

From there, the ability to upload and view and save and download to computer would be incredible. I want to do it, and I think getting these things online and being able to share them is going to be awesome.
Wesnoth BestiaryPREVIEW IT HERE )
Unit tree and stat browser
CanvasPREVIEW IT HERE )
Exp. map viewer
User avatar
nyov
Posts: 20
Joined: July 7th, 2019, 1:45 pm

Re: Wesnoth Canvas

Post by nyov »

Hey. I'll necro this, because I'm quite interested what your results were with your Terrain Transitions technique?

I got interested in map renders as well, though I haven't really dug for dirt yet, in the codebase, and maybe won't.
viewtopic.php?f=10&p=644691#p644691
Post Reply