PixiJs

Pixi.js的魅力

这里前端设计到图像的操作使用了PIXIJSpixijs的最关键的三个对象：App
我就不思·2024-01-27 09:03

uni-app中使用pixijs绘制兼容H5和微信小程序大转盘游戏

重置转盘数据//#ifdefMP-WEIXINimport{createPIXI}from"@/libs/pixi.miniprogram";constunsafeEval=require("@/libs/unsafeEval");constinstallSpine=require("@/libs/pixi-spine");constinstallAnimate=require("@/libs/p
lyj168997·2023-12-30 06:59

游戏框架列举

以下是我找的游戏框架列举：1、createJS是比较小型的一种框架可以用来做网页小游戏http://www.createjs.cc/2、PixiJSv4用最快，最灵活的2DWebGL渲染器创建精美的数字内容
依耳私语·2023-11-23 20:32

学习 PixiJS — 精灵状态

精灵状态如果你有复杂的游戏角色或交互式对象，你可能希望该角色根据游戏环境中发生的情况，以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态，那么只要游戏中出现与该状态相对应的事件，就可以触发这些状态。比如，通过键盘的方向键控制一个游戏角色时，按下左箭头，角色就向左移动，其实可以理解为，按下左键头时，触发了角色的向左移动的状态。如果要开始使用精灵状态，首先需要一个状态播放器。状态播放器用
weixin_34235135·2023-11-13 06:21

使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果

前言最近要做一个3D卡片的效果，设计图如下：第一次尝试第一次尝试选择了我比较熟悉的PixiJS，关于我如何用PixiJS中的Sprite3d做了一个失败的3D卡片，可以戳这里查看。
weixin_34007020·2023-11-07 06:42

眨个眼就学会了PixiJS

本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们快速光速入门，掌握Pixi.js的用法。实际工作中我还没有用上Pixi.js，本文只是记录我的学习过程。
德育处主任Pro·2023-10-26 22:30

用vue3+pixijs复刻童年记忆里的游戏-猎鸭季节

大厂技术坚持周更精选好文前言本期将用vue3与pixijs复刻出童年在小霸王里面玩的游戏-猎鸭季节，当初玩它需要光线枪才行，非常不好瞄准，每当打中鸭子就非常激动，打不中就会有收到狗子的嘲笑，想想那时候快乐真的很简单
徐小夕@趣谈前端·2023-09-21 21:22

一些面向H5画布Canvas的js库

4.pixijs（2D库）一个2DwebGL渲染器，提供无缝Canvas回退，支持主流浏览器，包括桌面和移动。5.Fabr
IT码农-爱吃辣条·2023-08-18 11:16

pixijs以鼠标为中心平移缩放

缩放方法用的是鼠标移动时不断设置元素中心anchor,并对元素进行平移,这种方式会影响子元素排列(理想的方法:获取鼠标与元素中心anchor的距离,根据缩放比例计算放大后与放大之前的距离,进行平移(上下左右平移的比例应该还不一样),感觉比较复杂)import*asPIXIfrom"pixi.js";//设置别名letApplication=PIXI.Application;letSprite=PI
adtk·2023-08-18 05:57

教你用PixiJs实现复杂动画

前言此篇文章源于前段时间商业有个项目需求，要实现一个比较复杂的H5交互动画。那说到动画常用的技术方案无非是下面几种：gif图css3动画属性原生Javascript实现CanvasWebGLgif图和css3动画属性显然只能实现展示型动画，而通过原生代码实现交互动画又是很复杂的，同时还得考虑动画的兼容性和性能问题。WebGL因为可提供硬件加速渲染，其渲染性能肯定是高于canvas的，但考虑到can
大转转FE·2023-07-27 15:16

使用Pixi.js编写JavaScript网页小游戏

Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficialsiteforPixiJS,TheHTMLCreationEngine.https:/
番大茄子·2023-06-20 02:40

PixiJS 源码解读：绘制矩形，底层都做了什么？

大家好，我是前端西瓜哥，今天带大家看一下PixiJS的源码实现。PixiJS是一个非常流行的Canvas库，start数将近4w。
前端西瓜哥·2023-06-13 00:25

PixiJS 源码深入解读：用于循环渲染的 Ticker 模块

这次来看看PixiJS的Ticker模块源码。Ticker的作用是在下一帧绘制前调用监听器，PixiJS使用它来不断对画面进行重绘。版本为7.2.4。
前端西瓜哥·2023-06-13 00:25

眨个眼就学会了Pixi.js

本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们~~快速~~光速入门，掌握Pixi.js的用法。实际工作中我还没有用上Pixi.j
德育处主任Pro·2023-04-21 14:51

Eva.js学习笔记

业务游戏化，游戏化互动产品，实现用户留存的目的image.pngimage.pngcanvas里实现动画性能会更好底层基于PixiJS渲染引擎，提供了强大的渲染能力，能力齐全，轻量，高性能。
small_zeo·2023-04-18 09:14

PixiJS 文字模糊处理策略

pixijs介绍PixiJS是一个用于创建交互式2D图形和动画的JavaScript库。它是一个快速、轻量级、易于使用的库，可以在WebGL和Canvas上运行。
揽月凡尘·2023-04-16 21:43

PixiJS 渲染优化

基于此，找到了PixiJS这个支持canvas和webgl渲染的引擎，关键是非常快(之前在g
揽月凡尘·2023-04-16 21:40

Pixijs框架使用

创建Pixi应用程序使用默认参数//创建一个Pixi应用程序（宽默认800，高默认600，背景色值默认为16进制0x000000）varapp=newPIXI.Application();//添加到页面中document.body.appendChild(app.view);完整代码见src/01.html设置参数//创建一个Pixi应用程序（宽1000，高900，背景色值为16进制0x1099b
pengjielele·2023-03-24 05:03

从0到1实现基于Pixi js的Spine头像生成功能

u06x0-gaw11.gif技术背景整体采用Pixijs+Spine+Vue的技术栈技术难点一用户形象是动画，如果直接截屏，会导致每次截取的形象不同，而且可能出现闭眼的情况。
hello_小丁同学·2023-01-27 18:00

【第二届青训营-寒假前端场】- 「小游戏开发」笔记

前端场景下的游戏开发开发角色和链路为什么要用游戏引擎前端过渡到游戏开发游戏引擎市面上常见游戏引擎特定类型的客户端游戏引擎TheNVLMaker**RPGMaker**Web游戏引擎CocosLayaEgretCreateJS&Phaser功能引擎2D游戏引擎的技术架构Web游戏引擎的渲染原理游戏开发的技能树PixiJS
余cos·2022-09-28 07:53

基于PixiJS实现react图标旋转动效

目录什么是PixiJSPixiJS初探PIXI.ApplicationPIXI.Spritesprite.x|sprite.y|sprite.anchor旋转起来什么是PixiJSPixiJS是一个开源的基于
·2022-07-18 16:21

PixiJs创建精灵动画

今天将使用PixiJs的动画精灵实现闪电划过的效果，效果如下：准备工作创建项目并引入PixiJs，详细介绍可以访问PixiJS起步使用PixiJs创建应用，并将应用插入舞台区域，详细介绍可以访问PixiJS
·2022-07-01 19:45

PixiJS创建应用

回顾前面成功引入了Pixi，现在可以开始使用Pixi了创建一个名叫app的Pixi应用对象letapp=newPIXI.Application({width:750,//default:800宽度height:1448,//default:600高度//antialias:true,//default:false反锯齿，设置为true使得字体的边界和几何图形更加圆滑//transparent:fa
·2022-07-01 12:43

PixiJS起步

项目搭建在你开始写任何代码之前，给你的工程创建一个目录，这里我的项目文件夹名称叫pixi-demo，使用VisualStudioCode编辑器打开该文件夹安装PixiPixi官网：http://www.pixijs.com
·2022-07-01 10:23

【PIXI.JS】问题集锦

轻量2D渲染库Documentshttp://pixijs.download/releas...遇到的坑如何获取绘制出的形状面积constspaces=this.graph.spacesconstextract
·2021-10-11 15:04

pixijs + DragonBonesJS 浅尝辄止

大家说pixijs挺优秀的。然后我尝试着浏览了官网所有examples，都非常顺利呈现了。当然某些其他渲染库/引擎官方给的demo不能顺利呈现，就有点让人觉得不是那么回事了。
Jeremy_young·2021-06-09 17:46

学习-PIXIJS-step1

1.PIXIJS介绍PixiJS是一个轻量级的2D渲染引擎，它能自动侦测使用WebGL还是Canvas来创建图形。开发者无需专门学习WebGL就能感受到强大的硬件加速的力量。
木子喵·2020-11-30 22:13

pixijs如何将gif图片加载游戏中变成序列帧

我们先从网上找一个动画素材；将这张图片加回本地，导入ps，ps中能看到这个动画有12帧；我们将其导出成png导入texturepacker，texturepacker是我们常用的一个图片打包软件，一般二维图片素材都会经它之手打成一张大图，加载进游戏，这样可以大大降游戏管理素材；降低drawcall;注意在选项里选择好引擎/json文件地址/png打包图片地址；最终形成了游戏中要的序列打包图；pix
火炎神2018·2020-09-15 05:17

pixijs微信小游戏排行榜开放域开发

关于微信小游戏开放域的基本概念本文不作介绍请去微信官文文档阅读；主域：在这你有几件事要作，第一准备好给离屏canvas用的容器；第二作好离屏canvas事件交互，比如切换菜单/关闭窗口；第三循环里有渲染，由于离屏canvas内有向微信官方的异步请求，所以他会晚于主域生成，但这时间是不确定的。以下是主域循环外的代码主要是先拿到离屏的引用然后设置好宽高；//letopenDataContext=wx.
火炎神2018·2020-09-15 05:46

PixiJs ———— 精灵加载去缓存

pixi.jsv5.2.0加载精灵的时候会有缓存相关的warning，每次都两百多条warning，这谁受得了，花了点时间，各种调试，终于把他们给去掉了，舒服。可能有人会问，直接googlecv一条龙不就解决了，但是网上关于pixi.js的文档是很少的，官方文档看了看，开发论坛看了看，都说用clearTextureCache方法，，通过打印发现是在load阶段给出的warning，所以这里没用。先
初见·2020-08-24 17:11

开始学习 PixiJS

PixiJS介绍PixiJS是一个超快的2D渲染引擎。它自动侦测使用WebGL或者Canvas。开发者无需专门学习WebGL就能感受到强大的硬件加速的力量。
FEWY·2020-08-20 21:55

开始学习 PixiJS

PixiJS介绍PixiJS是一个超快的2D渲染引擎。它自动侦测使用WebGL或者Canvas。开发者无需专门学习WebGL就能感受到强大的硬件加速的力量。
FEWY·2020-08-20 21:55

pixijs 之拖拽功能升级版

pixijs官方的有拖拽功能的范例；https://pixijs.io/examples/#/demos/dragging.js官方的案例是拖一个小图标，锚点也设置为物体的中心了。
火炎神2018·2020-08-14 23:58

PixiJS学习（2）添加一个位图纹理

简介：在所有的2D（包括3D）渲染中都有Texture这样一个概念，翻译过来应该叫“纹理”。很多书籍或文章中对于它的解释五花八门，我个人的理解是：它是一个材质、贴图这样的概念。这里所说的位图就是我们常说的一张图片，一个.png或者.jpg图片。在原生的canvas中添加一张图片，我们使用的是drawImage()。可以对图片进行缩放和裁剪。https://www.jianshu.com/p/ded
magicButterfly·2020-08-11 01:20

什么是pixi

PixiJS的目标是提供一个快速且轻量级的2D库，并能兼容所有设备。
yyshang·2020-07-30 09:57

每日科技英文43:html5 webgl 2d引擎PixJS特点

beabletoPixJSv4TheHTML5CreationEngineCreatebeautifuldigitalcontentwiththefastest,mostflexible2DWebGLrenderer.tocreatesthwithsth:用...创建...digitalcontent:数字内容FastPixiJS'st
随风而行之青衫磊落险峰行·2020-07-14 02:41

基于TypeScript的PixiJS开发环境设置（webpack篇）

转自：http://www.limbonova.com/2017/09/setup-pixijs-with-typescript-using-webpack/前几天写了一篇用Browserify打包的PixiJS
yuliying·2020-07-06 11:13

pixi初探笔记（1）

下载安装git安装通过命令行创建一个文件夹然后cd进入后输入[email protected]:pixijs/pixi.js.git然后gitcheckouttags/v4.0.0切到4.0.0
KedAyA·2020-03-27 17:44

Pixi.js

PixiJS是一个2D渲染引擎，能自动侦测并使用WebGL或Canvas。PixiJS使用JavaScript或HTML5基础来显示媒体，创建动画或管理交互式图像，从而制作游戏或应用。
JunChow520·2020-03-12 13:33

H5 Flappy Bird 游戏制作 (1)

比如：createjspixiJSplaycanvas上面这个游戏就是用这个库实现的egret然而今天我不用这些引擎。使用原生js实现这个游戏。
vivaxy·2020-03-05 11:43

Pixi探索记录

看js请求：逐个js搜索研究；第一个：Pixijs，一顿搜索发现Pixijs挺强大，感觉都可以做H5小游戏了；Pixi教程中文版(从零学习)https://github.com/wa
wangwenjie1314·2020-02-02 13:05

手把手教你打造一款轻量级canvas渲染引擎

背景当我们开发一个canvas应用的时候，出于效率的考量，免不了要选择一个渲染引擎（比如PixiJS)或者更强大一点的游戏引擎（比如CocosCreator、Layabox)。
卓越人生·2019-12-31 08:00

H5一镜到底——初步了解01

一、涉及的知识点：1)PixiJS:绘图，其中包括舞台、场景、普通精灵、动画精灵、平铺精灵、定时器等。
面包在奔跑·2019-12-27 10:47

D3 力导向图和 WebGL 的整合使用

由于性能问题的局限，将两者结合的尝试越来越多（如），本文将尝试用D3的力导向图和Three.js和PixiJS结合。全文阅读完大概5分钟，因为你重点应该看代码。做数据可视化时，必然会考虑性能的问题。
GeekPlux·2019-12-19 09:20

PixiJS基础教程

PixiJS是一个轻量级的2D渲染引擎，它能自动侦测使用WebGL还是Canvas来创建图形。这个库经常被用来制作HTML5游戏以及有复杂交互的H5活动页。
深红·2019-12-17 03:48

pixijs shader fade 从左到有右淡入 从下到上淡入效果

pixijsshaderfade从左到有右淡入从下到上淡入效果constapp=newPIXI.Application({transparent:true});document.body.appendChild
newmiracle宇宙·2019-11-20 09:00

学习 PixiJS — 小精灵冒险

创建滚动背景还记得学习PixiJS—视觉效果一文中提到的视差效果吗？小精灵冒险的背景是使用视差效果做的，也
FEWY·2019-03-11 21:14

pixi.js 解决绘制弧线锯齿问题

在PixiJS有自带的抗锯齿的参数，但是在使用时感觉效果并不是很好。
vonvon_chris·2019-03-11 17:12

学习 PixiJS — 小精灵冒险

创建滚动背景还记得学习PixiJS—视觉效果一文中提到的视差效果吗？小精灵冒险的背景是使用视差效果做的，也
FEWY·2019-03-11 00:00

学习 PixiJS — 交互工具

说明Pixi内置一组功能有限的用于鼠标交互和触摸交互的方法，但是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操作，这篇文章介绍的是Tink库，它有通用的指针对象、拖放精灵、按钮对象、键盘控制等一些有用的功能。使用Tink库要开始使用Tink，首先直接用script标签，引入js文件。然后创建它的实例，它的构造函数需要两个参数，一个是PIXI，另一个是渲染器的view属性，也就是用作视
FEWY·2019-03-04 21:49
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他