Quantcast
Channel: 2D Latest Topics
Viewing all articles
Browse latest Browse all 623

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

$
0
0

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


Viewing all articles
Browse latest Browse all 623

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>