Sign in to follow this  
roxor45

How to join Graphics and sprite

Recommended Posts

Hello all,

 

Actually I try to create a draggable image with circle around.

so I don't know how join sprite and graphics function

first part , with draggable picture :

 

        var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
        document.body.appendChild(app.view);
    
        // create a texture from an image path
        var texture = PIXI.Texture.fromImage('images/ppois.png');
    
        // Scale mode for pixelation
        texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
    
            var bunny = new PIXI.Sprite(texture);
    
            // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
            bunny.interactive = true;
    
            // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
            bunny.buttonMode = true;
    
            // center the bunny's anchor point
            bunny.anchor.set(0.5);
    
            // make it a bit bigger, so it's easier to grab
            bunny.scale.set(3);
    
            // setup events for mouse + touch using
            // the pointer events
            bunny
                .on('pointerdown', onDragStart)
                .on('pointerup', onDragEnd)
                .on('pointerupoutside', onDragEnd)
                .on('pointermove', onDragMove);
    
    
            // move the sprite to its designated position
            bunny.x = 100;
            bunny.y = 100;
    
            // add it to the stage
            app.stage.addChild(bunny)
          }


         
 


second part for create a circle :

 

     var graphics = new PIXI.Graphics();
    graphics.lineStyle(1, 0xFFBD01, 1);
    graphics.beginFill(0,0, 1);
    graphics.drawCircle(400, 250, 50);
    graphics.endFill();
     app.stage.addChild(graphics);

 

But how add this circle around this picture ??

thanks for your help

 

Share this post


Link to post
Share on other sites

thx for your help,

I try this, but same problem

    var bunny = new PIXI.Sprite(texture);

    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.set(0.5);
    bunny.scale.set(3);
    bunny
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

    bunny.x = 100;
    bunny.y = 100;
	
var graphics = new PIXI.Graphics();
    graphics.lineStyle(1, 0xFFBD01, 1);
    graphics.beginFill(0,0, 1);
    graphics.drawCircle(400, 250, 50);
    graphics.endFill();

    bunny.addChild(graphics);  //add to bunny

    app.stage.addChild(bunny); //stage bunny

 

Share this post


Link to post
Share on other sites

drawCircle(0, 0, 50). 

What are your arguments to beginFill? Whats "0,0" ? shouldn't it be "0.0" ? Also, its black and that black will cover bunny. do you wan it to be behind bunny? Then you need additional container that will hold both sprite and graphics and you call that container "bunny" and move it.

Share this post


Link to post
Share on other sites

-for argument in beginfill ( 0,0) it's because I don't want a background for this circle. So after test I can delete this line  :)

so If I understand you , I need to create a PIXI.Container ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.