搜索 - 腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

来自专栏前端数据可视化
眨个眼就学会了Pixi.js
本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。实际工作中我还没有用上 Pixi.js，本文只是记录我的学习过程。本文使用 Pixi.js 7.2 版本 CDN 本文为了和各位工友一起快速上手 Pixi.js ，所以会使用 CDN 的方式引入 Pixi.js。根据你的项目需求选择对应的 Pixi.js 版本： Pixi.js 历史版本下载地址 NPM 工作中很多项目都会使用脚手架的方式进行开发，通常也会使用 npm 的方式下载依赖包。 Pixi.js 也提供了这种方式。 npm i pixi.js 下载好 Pixi.js 后，在需要用到 Pixi.js 的页面中引入即可。 Pixi.js是一个强大的2D渲染引擎，可以用于创建各种类型的动画。 Pixi.js 提供了一个处理循环的对象 ticker，它是 Pixi.js 的核心组件之一。
8.4K10编辑于 2023-04-23
来自专栏Golang语言社区
HTML5游戏引擎深度测评
Pixi.js定位很多人第一眼看到Pixi.js官网，都会不自觉的认为这是一款游戏引擎。所以当你看到Pixi.js提供了为数不多的功能时，请不要惊讶，因为它只是一款渲染器。设计理念 Pixi.js的设计理念很多程度来源于它的定位，只做渲染器，要把渲染功能做到最强。而这样的定位，则会让Pixi.js成为其他引擎的渲染内核。你经常能看到一些游戏引擎，或者产品都基于Pixi.js而开发。在渲染方面，Phaser并没有自己的渲染内核，而是直接引用了Pixi.js。这确实是个明智之举，因为Pixi.js在渲染性能方面非常强悍。 Pixi.js Pixi.js作为一个渲染器，其工具支持也是相当清爽，除了一个程序库之外，没有提供任何工具。
8.9K91发布于 2018-03-27
来自专栏Golang语言社区
HTML5 游戏引擎深度测评
Pixi.js 定位很多人第一眼看到Pixi.js官网，都会不自觉的认为这是一款游戏引擎。所以当你看到Pixi.js提供了为数不多的功能时，请不要惊讶，因为它只是一款渲染器。设计理念 Pixi.js的设计理念很多程度来源于它的定位，只做渲染器，要把渲染功能做到最强。而这样的定位，则会让Pixi.js成为其他引擎的渲染内核。你经常能看到一些游戏引擎，或者产品都基于Pixi.js而开发。在渲染方面，Phaser并没有自己的渲染内核，而是直接引用了Pixi.js。这确实是个明智之举，因为Pixi.js在渲染性能方面非常强悍。 Pixi.js Pixi.js作为一个渲染器，其工具支持也是相当清爽，除了一个程序库之外，没有提供任何工具。
6.9K132发布于 2018-03-22
来自专栏前端实验室
强烈推荐！汇总了几个前端离不开的2D图形库
https://github.com/fabricjs/fabric.js pixi.js Pixi.js是一个基于WebGL和Canvas的2D渲染引擎，它提供了一种简单、快速的方式来创建交互式图形、 Pixi.js支持多种渲染器，包括WebGL、Canvas和SVG，可以根据不同的场景选择最适合的渲染器。它还提供了很多实用的功能，例如精灵、文本、遮罩、滤镜、动画等，可以帮助开发者轻松创建各种效果。 Pixi.js的API简单易用，文档详细，社区活跃，拥有大量的插件和扩展，可以满足各种需求。Pixi.js除了适用于游戏开发，还可以用于数据可视化、UI设计、广告制作等领域。
3K20编辑于 2023-08-10
来自专栏前端西瓜哥的前端文章
个人开源图形编辑器 Suika 2024 年三季度计划
2024 第二季度工作做了什么计划的完成情况： transform 已经重构完成；尝试改为 pixi.js 渲染器，但渲染效果不满意，没有合到主分支；实现了编组功能；还做了的其它功能：新增铅笔替换为 pixi.js 然后我尝试重构渲染相关逻辑，改为用 pixi.js，但发现 pixi.js 的渲染不能满足我的需求，具体表现有：圆形放很大时，不够光滑（提了 issue，维护者建议用大的半径，曲线较小时倒是没这个问题；自交的多边形填充渲染是有问题，pixijs 默认使用简单的填充算法提高性能，需要自己替换填充算法； pixi.js 8 支持 webgpu 还是不太行，貌似 webgpu 不太稳定因为 pixi.js 太手动挡了，需要做的工作太多，所以我就放着不做了，先做其它我更感兴趣的事情去了。 pixi.js 版 suika 编辑器体验地址： https://blog.fstars.wang/app/suika-pixi/ 编组 transform 改造完了，那编组功能自然就安排上了。
35210编辑于 2024-07-12
来自专栏各类技术文章~
纹理打包器 TexturePacker
TexturePacker简单使用因为我是为了pixi.js来使用的，所以直接看PixiJs的教程就可以啦。官网上的教程是英文的，但是其实比较简洁，大家翻译工具翻译一下也不会有什么出错。在右侧的输出文件选项中，可以选择你需要的配置，我使用的是pixi.js。当然其他的像unity这些软件的配置也都有。输出文件格式是json格式。之后点击发布精灵表即可。你只需要知道sprite精灵的帧id（frame id），然后在pixi.js的使用过程中，根据帧id调用这些精灵来进行布局即可。又一次新的工具和知识get了！
2.4K00发布于 2021-11-03
来自专栏愚公系列-书籍专栏
【愚公系列】《AIGC辅助软件开发》031-AI辅助解决各种疑难杂症：警惕小众场景下的误导性回答
**纹理的垂直翻转（Texture Flipping）** Pixi.js 可能在某些情况下会翻转纹理，特别是在处理 WebGL 渲染管线时。在 WebGL 中，纹理坐标的原点（0, 0）通常在左下角，而在 Pixi.js 或其他 2D 渲染引擎中，原点可能在左上角。因此，Pixi.js 在处理纹理坐标时，可能会自动翻转 `vTextureCoord.y`，这会导致取值范围不再是 0 到 1。 **视口和画布缩放** Pixi.js 可能会基于视口或画布的比例调整纹理坐标。在 Pixi.js 4.x 版本中，`vTextureCoord.y` 的取值范围为 0~0.6，通常是由于以下几种原因之一： ### 1.
2.1K00编辑于 2024-12-31
来自专栏前端西瓜哥的前端文章
个人开源图形编辑器 Suika 的 2024 年二季度开发计划
当用 transform 改造完项目后，我会用 pixi.js v8 替换掉原来的原生 Canva 2D 写的渲染方式，也是不小的工作量。 pixi.js v8 是最近才发布的版本，底层渲染器新增了 WebGPU，据说性能有不小提升，我来尝尝鲜探探路。所以，2024 二季度的计划是：使用 transform 方案重构项目；使用 pixi.js v8 渲染引擎替换原来羸弱的 Canvas 2D 原生渲染。
39800编辑于 2024-04-03
来自专栏贤羽的前端小栈
PixiJS 修炼指南 - 01. 启程
DOCTYPE html><script src="https://pixijs.download/release/<em>pixi.js</em>"></script><script> const { Application 推荐使用 Vite 创建一个基本的 Vanilla + TypeScript 项目，再安装 pixi.js 和几个常用的 PixiJS 基本子包：$ npm create vite@latest my-pixi-demo $ cd my-pixi-demo$ npm install -S pixi.js @pixi/utils然后清空项目的入口脚本（一般为 src/main.ts），修改为：import { Application } from 'pixi.js';const app = new Application({ width: 640, height: 360, backgroundColor: 0x6495ed import { Application, Graphics, Sprite, Text,} from 'pixi.js';const app = new Application({ width
6.1K73编辑于 2023-05-06
来自专栏前端西瓜哥的前端文章
学到了！Figma 原来是这样表示矩形的
import { Matrix } from "pixi.js"; const matrix = new Matrix(1, 2, 3, 4, 5, 6); const topLeft = matrix.apply ({ x: 0, y: 0 }); // { x: 5, y: 6 } // 或直接点 const topLeft = { x: 5, y: 6 } 这里引入了 pixi.js 的 matrix 类 editors=0012 代码实现： import { Matrix } from "pixi.js"; // 计算和 (0, -1) 的夹角 const calcVectorRadian = (vec
55810编辑于 2023-12-20
来自专栏pangguoming
HTML5 game engines
Uses Pixi.js to render using WebGL or canvas. Pixi.js: 2D rendering engine using WebGL with a canvas fallback. stat.js: Simple JavaScript performance
2.1K70发布于 2018-03-07
来自专栏hightopo
原 WebGL on iOS8 终于等到了
新语言促成了如上图片 image.png 但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持，这篇《A first look at what iOS8 means for Phaser and Pixi.js
42230发布于 2018-06-05
来自专栏若城技术专栏
颠覆常规Trae IDE教你如何用新玩法打造超级知识体系
经过技术调研决定使用 pixi.js中的着色器功能。但是我此前从未使用过该插件及功能。于是我尝试的使用Trae 为我解决当前的问题。接下来，我们选择Builder模式，选择该文件并输入以下内容： vue3项目中，我需要使用pixi.js 中的着色器对已有的图片进行操作，如自然，去雾，锐化，黑白色，反色，等如和实现，以及关于 pixi.js 中关于着色器相关的知识点，请详细讲解，我是个小白，对于自然，去雾，锐化，黑白色，反色，等图片操作给出完整示例代码以及详细讲解此时我们等待Trae为我们分析并讲解相关内容即可
1.8K10编辑于 2025-03-01
来自专栏蚂蚁开源社区
微信小程序，一个滑块拼图游戏
滑块拼图小游戏简介一个微信小程序游戏，基于 pixi.js 和 JetLua/fish 微信小游戏适配库实现。
2.3K10编辑于 2022-03-28
来自专栏游戏杂谈
chrome诡异的Provisional headers are shown
而Phaser.js是在PIXI.js的基础之上进行的封装。而国内有一家公司，开发一个叫青瓷的引擎（QICI），看上去还蛮不错的，所以准备拿过来调研。
8.2K10发布于 2018-11-19
来自专栏贤羽的前端小栈
PixiJS 修炼指南 - 02. 项目重构
可以移动的精灵成员”写成一个由 Sprite 派生的类 MovableSprite:// movable-sprite.tsimport { Assets, Sprite, Texture } from 'pixi.js 目录下新增一个 types/ 目录，然后在里面新建一个文件，名字改为 scene.d.ts，内容为：// src/types/scene.d.tsimport type { Container } from 'pixi.js first-scene.ts，将之前入口脚本的简单场景内容转移到这里：// src/scenes/first-scene.tsimport { Application, Container } from 'pixi.js 我们的应用对象也使用这个方式从 PixiJS 默认的 Application 中派生出来，这里取名就直接取名为“我的应用” (MyApp) 吧：// app.tsimport { Application } from 'pixi.js
2K40编辑于 2023-05-06
来自专栏性能与架构
Web前端开发技术栈
|-- D3 |-- Echarts |-- HighCharts |-- Vis.js |-- Flot WebGL |-- Three.js |-- Babylon.js |-- Pixi.js
2.5K90发布于 2018-04-03
来自专栏拂晓风起
HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画
https://github.com/pixijs/pixi.js https://github.com/pixijs/pixi-spine 相对上述两个方案来说，PIXI就能全面支持spine，这也是 maximum-scale=1"> <meta charset="UTF-8"> <title>spine-js</title> <script src="js/pixi/<em>pixi.js</em>
6.7K51发布于 2018-07-03
来自专栏蚂蚁开源社区
【H5开源网页端】3D版本星球大战
name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <script src="js/libs/pixi/<em>pixi.js</em>
1.2K30编辑于 2022-04-27
来自专栏贤羽的前端小栈
PixiJS 修炼指南 - 04. 资源加载（下）
和图片文件加入项目的 public/ 目录，随后就可以通过 Assets.load() 读取 Json 文件获得 Spritesheet 对象了： import { Spritesheet } from 'pixi.js sheet.animations 里就会出现上面定义的动画帧序列 cat，我们再通过它创建一个 AnimatedSprite 动画精灵： import { AnimatedSprite, Spritesheet } from 'pixi.js // ... } // ... } 这样，在之前的应用入口位置，我们就能获取到总加载进度了： // src/app.ts import { Application } from 'pixi.js
1.5K40编辑于 2023-07-20

第 2 页第 3 页

点击加载更多