Search the Community
Showing results for tags 'phaser sprite rotating canvas'.
Found 1 result
-
Hello. Why does the rotating sprite in this little example http://oddskill.bplaced.net/bounce_rot_cow/index.html leave (laps over) the canvas boundaries ? How to avoid that ? Are there any possibilities to set a polygonal bounding box for the sprites boundaries ? Best regards and thanks in advance. Chris PS: sourcecode below index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Bouncing Rotating Cow</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript" src="js/bounce_rot_cow.js"></script> </head> <body> <h1>BOUNCING ROTATING COW</h1> <div id="centerDiv"> <div id="container"> <!--Phaser Canvas Element in this example called "container" --> </div> <a id="zip" href="bounce_rot_cow.zip">sourcecode</a> </div> </body></html>bounce_rot_cow.js var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'container', { preload: preload, create: create, update: update });var img;function preload() { game.load.image('cow', './assets/cow2_bg_white.png');}function create() { game.stage.backgroundColor = '#00ff00'; game.physics.startSystem(Phaser.Physics.ARCADE); img = game.add.sprite(20, 20, 'cow'); game.physics.enable(img, Phaser.Physics.ARCADE); img.body.velocity.x=100; img.body.velocity.y=100; img.body.collideWorldBounds = true; img.body.bounce.set(1); img.anchor.setTo(0.5, 0.5);}function update() { img.rotation += img.body.velocity.x / 5000;}style.css body { background: #000000;}h1{ color: #ffffff; text-align: center;}#centerDiv { width: 500px; margin: 0 auto; background-color:#dddddd; }
