Jump to content

Sprite rotation around anchor point


Recommended Posts

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;
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.');
        me.loader.preload(game.resources, this.loaded.bind(this));
    loaded() {
        me.state.set(me.state.PLAY, new game.PlayScreen());
        me.debug.renderHitBox = true;

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) {

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(() => {


Link to comment
Share on other sites

  • 2 weeks later...

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...