gamemaker99

Members
  • Content Count

    1
  • Joined

  • Last visited

Everything posted by gamemaker99

  1. I'm attempting to rotate a sprite around it's anchor point, basically the center of the sprite. After placing it on the stage, and applying the rotation transform, I see the sprite is rotating roughly what appears to be around the (0,0) point of the stage. What am I missing in order to get this to rotate around it's own center? I would expect this rotation to happen around the anchor point which defaults in the center of the sprite. I can see it's set to (0.5, 0.5). See GIF and code below. const melonjs = require('melonjs').me; require('melonjs/plugins/debug/debugPanel'); import ship from './assets/ship.png'; const game = { onload() { if (!me.video.init(800, 600, { wrapper: 'screen', scale: 'auto' })) { alert('Your browser does not support HTML5 canvas.'); return; } me.loader.preload(game.resources, this.loaded.bind(this)); }, loaded() { me.state.set(me.state.PLAY, new game.PlayScreen()); me.debug.renderHitBox = true; me.state.change(me.state.PLAY); } }; game.resources = [ { name: 'ship', type: 'image', src: ship }, ]; game.ShipSprite = me.Sprite.extend({ init(x, y, settings) { this._super(me.Sprite, 'init', [x, y , settings]); this.body = new me.Body(this); this.body.addShape(new me.Rect(0, 0, this.width, this.height)); }, update(dt) { this.currentTransform.rotate(0.01); } }); game.PlayScreen = me.Stage.extend({ onResetEvent() { me.game.world.addChild(new me.ColorLayer('background', '#5E3F66'), 0); var physicEditorContainer = new me.Container(); const ship = new game.ShipSprite(150, 150, { width: 40, height: 100, image: 'ship' }) physicEditorContainer.addChild(ship, 1); me.game.world.addChild(physicEditorContainer, 1); } }); me.device.onReady(() => { game.onload(); });