pixi.js | 易学教程

Pixi.js How should HP write?

阅读更多关于 Pixi.js How should HP write?

问题 How should HP write? Because HP will decrease, but I found that he will deform. Each time container.hpStatus.width- = 1; HP's icon will be distorted, especially HP = 0 is most obvious. enter image description here You Can Look My Codepen. app.ticker.add((delta) => { if (container.hpStatus.width > 0) { container.hpStatus.width -= 1; } else { container.hpStatus.width = 450; } }); How can i make sure he doesn't deform？回答1: The hp bar is getting distorted because you are decreasing width of

How to handle WebGL CONTEXT_LOST_WEBGL errors more gracefully in PixiJS?

阅读更多关于 How to handle WebGL CONTEXT_LOST_WEBGL errors more gracefully in PixiJS?

问题 I have a React application that uses a data visualization library that uses PixiJS. I occasionally get frustrating CONTEXT_LOST_WEBGL errors in Chrome that force the user to manually reload the page, in order for the page to be (re)rendered. I cannot often or reliably reproduce the error, but I know that it happens as other people tell me the application occasionally shows no data. The situations that raise this error seem very context-dependent and therefore difficult to recapitulate — low

How to convert a graphic to a sprite in pixijs

阅读更多关于 How to convert a graphic to a sprite in pixijs

问题 Is there a way to convert a graphic to a sprite? I have a graphic containing a single rectangle, and would like to convert it to a sprite to enable complex animations. I have tried doing let p= new Graphics(); p.beginFill(0x000000); p.lineStyle(0); p.drawCircle(100, 100, 10); p.endFill(); const t = RenderTexture.create(p.width, p.height); renderer.render(p, t); const sprite = new Sprite(t); However this is not working. 回答1: var gr = new PIXI.Graphics(); gr.beginFill(0xFFFFFF); gr.lineStyle(0)

PixiJS only draws a certain amount of rectangles?

阅读更多关于 PixiJS only draws a certain amount of rectangles?

问题 I want to draw a grid dynamically (based on the user definied size) with Pixi.js. My code is pretty straightforward: let app, graphics; const cellSize = 10; initBoard(); updateGridAlgorithm(false, true, 53); //does work for values < 53 function initBoard() { const width = window.innerWidth; const height = window.innerHeight; app = new PIXI.Application({ width: width, height: 900, backgroundColor: 0xffffff, resolution: window.devicePixelRatio || 1, autoResize: true, antialias: true });

PixiJS only draws a certain amount of rectangles?

阅读更多关于 PixiJS only draws a certain amount of rectangles?

How to apply mask in pixijs container that will not show it's color at page refresh?

阅读更多关于 How to apply mask in pixijs container that will not show it's color at page refresh?

问题 I'm using the code below to apply a mask in a container, but after I click the refresh button on page (chrome) the pixi stage becomes completely white until the refresh completes. Do you know how to fix that? let mask = new PIXI.Sprite(PIXI.Texture.WHITE); mask.x = maskX; mask.y = maskY; mask.width = maskWidth; mask.height = maskHeight; container.addChild(mask); container.mask = mask; 回答1: The mask shouldn't be a child of the container. You're creating a sprite, adding it as a visible child,

Do not fire interaction listener if something “covering” interactive element was clicked

阅读更多关于 Do not fire interaction listener if something “covering” interactive element was clicked

问题 I made simple recreation available at https://codesandbox.io/s/fancy-architecture-zsu57?file=/src/index.js:0-696 But in essence following code triggers that alert('Click!') function when I click on a text even though my interaction listener is set on the sprite. I was under impression that pixi handles this case (when element is covered by another), but I guess I was wrong. Is there a way to only fire interaction if I click on sprite explicitly and not on any element that is covering it? Code

Optimizing pixi grid viewport

阅读更多关于 Optimizing pixi grid viewport

问题 I am using pixi.js to create an interactive grid. This grid is composed of PIXI Graphics rectangles. I am now creating a layout of 25000 rectangles and the browser is having a hard time to process it (code sandbox below) This is my setup : setup() { // making a 30 x 13 grid of tiles for (let i = 0; i < 25000; i++) { let square = new PIXI.Graphics(); square.beginFill(0xF2F2F2); square.drawRect(0, 0, 25, 25); square.endFill(); // Opt-in to interactivity square.interactive = true; square

pixi.js + three.js

阅读更多关于 pixi.js + three.js

three.js 最好的webgl 3d渲染库之一, pixi.js　最好的webgl 2d渲染库之一,也许可以把之一去掉两个库都很精简,如果把两个库结合起来，一定很爽很爽，你说是吧！跳一跳three.js开发的。欢乐球球three.js+pixi.js开发的. three.js, pixi.js都是javascript开发的，方便javascript爱好者。 three.js, pixi.js开发微信小游戏的话,适配很简单. 基本上可以这么说,three.js做2dui很麻烦，绝大多数是three.js开发 3d, pixi.js开发2d. 怎么做呢? 假设pixi.js的渲染器为renderer2D three.js的渲染器为renderer3D renderer2D.reset() renderer3D.state.reset(); // 处理3d场景 renderer3D.setRenderTarget(null); renderer3D.render(scene, camera, renderTarget); renderer2D.reset() // 处理2d变化 renderer2D.render(stage); // 核心的逻辑 renderer3D.state.reset(); renderer3D.setRenderTarget(null); //<-

详解Canvas动画部分

阅读更多关于详解Canvas动画部分

基础篇： Html5中Canvas绘制、样式详解（不包含动画部分）此篇为后续目录 1. 状态的保存和恢复 2. translate移动 3. 旋转Rotating 4. 缩放Scaling 5. 图形相互交叉显示规则 6. 裁切路径 7. 动画基本步骤 8. canvas相关的动画js框架 1.状态的保存和恢复 save() 保存画布(canvas)的所有状态 restore() save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：当前应用的变形（即移动，旋转和缩放，见下）以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled