随笔分类 - pixijs
摘要:pixijs mask 注意的问题 黑色 透明都不是显示的 其他颜色都是显示的区域
阅读全文
摘要:pixijs层级另类写法 const app = new PIXI.Application({ width: 750, height: 1206, transparent: true, forceCanvas: true }); document.body.appendChild(app.view)
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>{$title}</title> <meta name="viewport" content="width=device-width, initial-sc
阅读全文
摘要:pixijs webgl模式显示图片黑屏的原因 这个是因为用了webgl 所以GPU 纹理限制了 打开这个https://webglreport.com/?v=1 就能看到你设备支持的最大纹理是多少 据说用canvas画布模式可以改善
阅读全文
摘要:pixijs webgl模式实现刮刮卡的方法 const app = new PIXI.Application({ width: 750, height: 1206, antialias: true}); var guanbi = PIXI.Sprite.from('/moban/images/cl
阅读全文
摘要:pixijs释放纹理的方法 有些时候 图片纹理不再需要应该要及时释放掉 const perlin1 = PIXI.Texture.from(bgkuang.sppic); var filter = new PIXI.Filter(null, fragment, { customUniform: 0.
阅读全文
摘要:pixijs shader透明度设置方法 要设置透明度1 那就直接设置就行 如果要设置透明度1以下 那就是 tex*=0.0; tex*=0.6;等 void main(void) { vec2 r = vTextureCoord; vec4 tex = texture2D(uSampler,r);
阅读全文
摘要:pixijs 用canvas的方法 虽然官方有forcanvas属性 但是我不建议用他 因为用了 有些webgl功能就用不了 比如shader 如果真的需要用的话 可以用 以下代码转化下就好了 var xx=app.renderer.extract.canvas(background); 也可以用以
阅读全文
摘要:pixijs 画扇形 var circle = new PIXI.Graphics(); var banjing=700; circle.beginFill(0xC30D23); var startangle=(360-90-(45/2))* Math.PI / 180; var endangle=
阅读全文
摘要:pixijs CANVAS putImageData 使用方法 https://codepen.io/a6965921/pen/vYXwwGg const app = new PIXI.Application({ width: 300, height: 150, forceCanvas: true,
阅读全文
摘要:pixijs shader 设置透明度的方法 precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; uniform sampler2D noise;
阅读全文
摘要:pixijs shader 传入多张图片到片段着色器的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> {$title} </title> <meta content="width=device-w
阅读全文
摘要:const app = new PIXI.Application(); document.body.appendChild(app.view); var imgURL = "/moban/images/share.jpg"; //加载图像,加载完成后执行setup函数 PIXI.loader.add
阅读全文
摘要:pixijs dragonbones 制作人物行走动画 https://pixijs.io/examples/examples/assets/pixi-spine/spineboy.jsonhttps://pixijs.io/examples/examples/assets/pixi-spine/s
阅读全文
摘要:pixijs控制骨骼动画 自己看代码吧 <script src="{$yumingnew}/js/pixi.min.js" type="text/javascript"> </script> <script src="{$yumingnew}/js/pixi-dragonbones.js" type
阅读全文
摘要:pixijs制作3D效果 const app = new PIXI.Application({ width: 750, height: 1206 }); document.body.appendChild(app.view); var camera = new PIXI.projection.Cam
阅读全文
摘要:pixijs做粒子拖尾效果 <script type="text/javascript"> const app = new PIXI.Application({ backgroundColor: 0x1099bb }); document.body.appendChild(app.view); le
阅读全文
摘要:function onDragStart(event){ this.data = event.data; var dianjix = this.data.global.x; var dianjiy = this.data.global.y; console.log('dianjix:'+dianji
阅读全文
摘要:pixijs离屏渲染的方法(canvas渲染canvas) const app = new PIXI.Application({ width: 750, height: 1206,transparent:true }); document.body.appendChild(app.view); PI
阅读全文
摘要:pixijs设置层级的方法 第一种写法(一般用于父元素的层级处理) <script src="/pixijsdemo/pixi-plugins/pixi-layers.js" type="text/javascript"> </script> <script type="text/javascrip
阅读全文