pixi学习总结

Posted 2021-02-09 zhangjingyun

1.使用的是webgl，是一个超快的html5 2d渲染引擎。

2.写好的pixi demo尽量是以http://方式展示，而不是file://,意思就是，放到服务器下

3.创建一个pixi实例，并展示出来，需要经历几个步骤

（1）创建一个舞台 stage ---- 理解为背景，层级最低

（2）创建一个画布 render ----选择canvas或者webgl渲染一个区域

 　　pixi。autodetectrenderer

      材质 texture，承载图片，本身不能显示，必须通过精灵来显示

　　var spirte = new pixi.sprite.fromimage(‘assets/image.png‘);

　　var texture= pixt.terxtrue.fromimage(‘bunny.png‘);

　　var sprite = new pixi.spite(texture);

　　 

（3）把画布插入dom

  (4)  创建一个精灵 sprite

（5）把精灵放入画布

（6）把画布加入舞台

（7）不断刷新舞台

 

事件交互

click，mousedown,mouseover,

注意事项：通常需要设置sprite.interactive = true ， 对于作按钮用的精灵，需要设置sprite.buttonMode = true;

与DOM的事件不同的是，精灵中的事件，是进行了二次封装的，???

通常需要用var event = data.originalEvent来与普通dom中的event对象保持一至???

demo pixi显示一张图片

精灵放大2倍？？？跟我想象的不一样，我以为直接scale*倍数就好了

var sprite = new PIXI.Sprite.fromImage(‘bunny.png‘);
 var sx = sprite.scale.x;
 var px = sprite.position.x;

 sprite.scale.x += 1;
 sprite.position.x -= px;
//Y方向同理
...
//刷新一下
requestAnimFrame(animate);

精灵层级问题
先加入画布的，出现在最下面，后加入的，出现在上面。
如果想调整精灵的层级关系，数组收集精灵，排序好之后在循环加入画布。但是，事先不确定层级关系的时候，给精灵加z-index属性，然后遍历这个属性进行排序，最后刷新舞台

  function pixiSort(arr){
             var ln = arr.length;
             var tmp;
             for(var i = 0;i<ln-1;i++){
                 for(var j=i+1;j<ln;j++){
                     tmp = arr[i];
                     if(arr[i].sortIndex > arr[j].sortIndex){
                         arr[i] = arr[j];
                         arr[j] = tmp;
                     }
                 }
             }
         }
受html dom操作的影响，有时候我们需要精灵按照指定的层级进行排列显示，比如给精灵指定index属性。要做到对zindex的控制，可以用到如下方法

function updateZindex(ob,stage){
            Object.defineProperty(ob,‘zIndex‘,{
                set : function(value){
                    if(this.sortIndex !== value){
                        this.sortIndex = value;
                        pixiSort(stage.children);
                    }
                },
                get : function(){
                    return this.sortIndex;
                }
            });
        }

　　

 说白了，就是控制精灵的先后顺序来达到显示层级的效果。

最后是如何销毁：

//移除全部精灵
stage.removeChildren()
//移除整个舞台的引用
stage.removeStageReference()

 我也没想明白，为什么要销毁精灵

以上创建的是建静止的精灵，及在精灵上邦定事件。

文章转载，原文出处：https://www.cnblogs.com/afrog/p/4056378.html