Jump to content


Photo

Canvas Project - rotating images?


  • Please log in to reply
5 replies to this topic

#1 Czar

Czar
  • Members
  • 165 posts

Posted 30 July 2017 - 05:14 AM

I have been working on Game Canvas project

TCanvasProject = class(TW3CustomGameApplication)

I figured that this would be the best solution to make a game. However, I am running into some annoying limitations.

I have my player image

FImgPlayer : TW3Image;

And I draw it to the canvas using the handle

canvas.DrawImageF(FImgPlayer,
idx*49, 0, 49, 49,
FPlayer.x,
FPlayer.y,
49, 49);

Now the problem..

I would like to draw a rotated version of the image. I have checked as much as I could and I cannot find any draw functions that allow rotation.

So am I missing something? How do I draw a rotated version of the image?
Or it is there better solution for making games that allow the flexibility requited to scale and rotate images/sprites?

Are there any demos that show this?

#2 Igor Savkic

Igor Savkic
  • Members
  • 188 posts

Posted 30 July 2017 - 12:30 PM

> I would like to draw a rotated version of the image. I have checked as much as I
> could and I cannot find any draw functions that allow rotation.
> So am I missing something? How do I draw a rotated version of the image?
> Or it is there better solution for making games that allow the flexibility
> requited to scale and rotate images/sprites?

Try TW3Sprite from SmartCL.Sprite3D unit. Also take a look at contents demos and games demos inside SMS demos, they are all some kind of games so they'll probably can give you some clues.

#3 Nico Wouterse

Nico Wouterse
  • Moderators
  • 262 posts
  • LocationAustralia

Posted 30 July 2017 - 12:53 PM

There is a Canvas.Rotate(angle) procedure and a rotate parameter in Canvas.DrawTo and Canvas.DrawPart procedure in the W3Canvas component

Otherwise these posts may help :

http://www.html5canv...otate-tutorial/

http://creativejs.co...nvas/index.html

https://www.w3school...nvas_rotate.asp

https://stackoverflo...as-rotate-image

https://stackoverflo...n-a-canvas?rq=1

https://stackoverflo...-canvas<br><br>
  • Czar likes this
Nico Wouterse

#4 Czar

Czar
  • Members
  • 165 posts

Posted 30 July 2017 - 09:15 PM

Thanks, I have found a few examples using sprite3d so I will examine those. Spartacus and ZenSky are looking promising. The missile command demo was a dead end for me even though on the surface it does much of what I was looking for.

#5 Czar

Czar
  • Members
  • 165 posts

Posted 31 July 2017 - 10:01 AM

Cheers Nico, I found this one http://creativejs.co...nvas/index.html very useful - I will post my working code soon- in case it helps someone else

#6 Czar

Czar
  • Members
  • 165 posts

Posted 31 July 2017 - 11:44 AM

I will make a simple demo later but for now I will just post the relevant bit of code Canvas.Save; Canvas.Translate(FPlayer.x+25, FPlayer.y+25); Canvas.Rotate(FPlayer.ang); canvas.DrawImageF(FImgPlayer, idx*49, 0, 49, 49, -25, -25, 49, 49); Canvas.Restore; Save the canvas before you start mucking around with it. Translate the origin point to where you want to draw the image. Rotate the canvas, draw the image and restore the canvas.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users