Canvas wraparound?

[nedbrek]

I'm using a canvas for a turn-based strategy game client.

The world wraps at the East / West edges. Currently, I draw the map flat, with a scrollbar.

I'd like to be able to scroll indefinitely, and always present the current region in the center and no hard edges.

Has anyone done this before? I'd love to see some sample code...


Thanks!

[Alexandre Ferrieux]

Scrolling indefinitely is incompatible with a scrollbar-like visual control, since it displays two absolute quantities (position and relative size of the thumb). So, assuming you provide some other means to "move East" and "move West" (like buttons, or grab-and-drag, or keyboard interaction), you're left with the task of visualizing the proper part of a wrapping world. For this, assuming you want to draw your map once for all, a simple trick is to draw it twice. This guarantees that for any "wrapped" position x and width dx, there exists a "physical" position $x so that

px % world-width = x

[px,px+dx] gives a contiguous view

-Alex

[Gerald W. Lester]

Alex,

To get the effect I *think* he wants he really needs to tile it at
least nine times:
XXX
XXX
XXX

and when the view gets more than 50% into one of the edges "squares",
wrap it so that the majority is back in the center "square".

--
+------------------------------------------------------------------------+
| Gerald W. Lester |
|"The man who fights for his ideals is the man who is alive." - Cervantes|
+------------------------------------------------------------------------+

[heinrichmartin]

On Monday, June 6, 2016 at 11:19:50 PM UTC+2, Gerald W. Lester wrote:
> To get the effect I *think* he wants he really needs to tile it at
> least nine times:
> XXX
> XXX
> XXX
>
> and when the view gets more than 50% into one of the edges "squares",
> wrap it so that the majority is back in the center "square".

Two tiles (four for both directions) are basically enough (in the sense that all views are available once). A third instance per direction might improve performance, e.g. when the view would toggle between the edges, i.e. implement a hysteresis for the wrap (https://en.wikipedia.org/wiki/Hysteresis#In_engineering).

[nedbrek]

It only wraps East to West. I think 2x is sufficient. I'm going to try and write some code soon...

Thanks!

[Gerald W. Lester]

On 6/12/16 12:01 PM, nedbrek wrote:
> It only wraps East to West. I think 2x is sufficient. I'm going to try and write some code soon...

Sorry, I missed that it only wraps East-West, in that case 2X is sufficent.