javascriptdrag-and-droppixi.js

pixi js: drag and drop circle


I started to create simple js game using pixijs. I need drag'n'drop functionality for Graphics circle but can't find info for this. I see only this example with sprites.


Solution

  • From http://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=dragging.js&title=Dragging

    Drag + drop works the same way for both graphics and sprites.

    var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true });
    document.body.appendChild(renderer.view);
    
    var stage = new PIXI.Container();    
    stage.interactive = true;
    
    var graphics = new PIXI.Graphics();
    graphics.interactive = true;
    graphics.lineStyle(0);
    graphics.beginFill(0xFFFF0B, 0.5);
    graphics.drawCircle(0, 0, 60);
    graphics.endFill();
    graphics.x = 100;
    graphics.y = 100;
    stage.addChild(graphics);    
    
    // setup events
    graphics
        .on('mousedown', onDragStart)
        .on('touchstart', onDragStart)
        .on('mouseup', onDragEnd)
        .on('mouseupoutside', onDragEnd)
        .on('touchend', onDragEnd)
        .on('touchendoutside', onDragEnd)
        .on('mousemove', onDragMove)
        .on('touchmove', onDragMove);
    
    function onDragStart(event)
    {
        // store a reference to the data
        // the reason for this is because of multitouch
        // we want to track the movement of this particular touch
        this.data = event.data;
        this.alpha = 0.5;
        this.dragging = true;
    }
    
    function onDragEnd()
    {
        this.alpha = 1;
    
        this.dragging = false;
    
        // set the interaction data to null
        this.data = null;
    }
    
    function onDragMove()
    {
        if (this.dragging)
        {
            var newPosition = this.data.getLocalPosition(this.parent);
            this.position.x = newPosition.x;
            this.position.y = newPosition.y;
        }
    }
    
    // run the render loop
    animate();
    
    function animate() {
    
        renderer.render(stage);
        requestAnimationFrame( animate );
    }