Jump to content

How to rotate and scroll to bottom background's image on canvas HTML5?


Recommended Posts

I'm here searching for help, what I'm doing is not exactly a game, but shares many principles. I'm pretty rookie with canvas, this is my first project.

Imagine any game's minimap, like World of Warcraft or GTA, where you can see the player's cursor on the center and the background rotates as the player commands indicates. I'm coding something like that in canvas html5. The functions over this background will be zooming, scrolling to bottom and rotation (the 3 has to be seemingly infinite).

Did it drawing it with canva's tools and loading as an image file too (in the code, the drawing alternative is commented).

Now I need to scroll the background to bottom as the user moves "the player", and rotate it as the user turn "the player". So the background always will scroll to bottom (rotated or not).

I need some advice about how to do it, because I'm a pretty lose. The image itself doesn't have to be a grid, it could be anything as the movement functions gets noticed.

PD: As you can see in the code, there's a function to rotate the background already (drawBestFit), and it works perfectly, I've got it from here. But with that function I have another issue, the anchor's rotation is on center and I need it to be on the machine's (black triangle) position.

Here's my code --> JSitor

Link to comment
Share on other sites

You can see an example of this kind of thing here: https://myforest.uk

Not only does the map move as the user moves around on the ground (in the scene display) but you can separately scroll/pan the map by varying increments. If you check the "Orient map" box it rotates to any angle too. It is all done in the basic 2D canvas context.

How it is done is described here: https://grelf.net/forestdesign.html#N657302 and you can easily find my JavaScript source files for details.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...