Pixi.js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Pixi.js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Pixi.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Pixi.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Pixi.js 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 红薯
适用人群 未知
收录时间 2013-03-16

软件简介

PixiJS 提供一个适用于所有设备的快速轻量级2D库。 PixiJS 渲染器允许每个人在不事先了解WebGL的情况下享受硬件加速的强大功能。 而且它很快、真的很快,适合创建丰富的交互式图形,跨平台应用程序和游戏。

PixiJS具有完整的WebGL支持,并且可以无缝地回退到 HTML5 的画布。 作为一个框架,PixiJS是用于创作交互式内容的绝佳工具,尤其是近年来远离Adobe Flash。 将它用于图形丰富的交互式网站,应用程序和HTML5游戏。 开箱即用的跨平台兼容性和优雅的降级意味着您可以减少工作量并享受更多乐趣! 如果你想要相对快速地创建精美和精致的体验,而不是深入研究密集的低级代码,同时避免浏览器不一致的麻烦,那么请将你的下一个项目用一些PixiJS魔法!

基本使用示例:

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

// load the texture we need
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.texture);

    // Setup the position of the bunny
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    // Rotate around the center
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // Add the bunny to the scene we are building
    app.stage.addChild(bunny);

    // Listen for frame updates
    app.ticker.add(() => {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});

下面是一些在线的演示:

更多实例请看 http://pixijs.github.io/examples/

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
4266 #Pixi.js#
2015/10/13 18:31
回复
举报
更多评论
发表于大前端专区
2019/05/16 14:53

PixiJS v5.0.2 发布,超快的 HTML5 2D 渲染引擎

PixiJS 5.0.2 发布了,PixiJS 提供一个适用于所有设备的快速轻量级2D库。 PixiJS 渲染器允许每个人在不事先了解WebGL的情况下享受硬件加速的强大功能。 而且它很快、真的很快,适合创建丰富的交互式图形,跨平台应用程序和游戏。 下载地址: Development Build: https://pixijs.download/v5.0.2/pixi.js https://pixijs.download/v5.0.2/pixi.js.map Production Build: https://pixijs.download/v5.0.2/pixi.min.js https://pi...

2
19
发表于大前端专区
2018/12/24 07:28

Pixi.js 4.8.4 发布,超快的 HTML5 2D 渲染引擎

Pixi.js 是一个超快的 HTML5 2D 渲染引擎,目标是提供一个快速的、轻量级而且是兼任所有设备的 2D 库。 Pixi.js 提供无缝 Canvas 回退,支持主流浏览器,包括桌面和移动。 Pixi 渲染器可以开发者享受到硬件加速,但并不需要了解 WebGL。 Pixi.js 4.8.4 主要更新内容: 重命名参数以方便用户使用 修复 ismobilejs 中的漏洞 Bumps earcut to 2.1.4 升级 resource-loader 以支持 cross-origin 详情查看发行日志 开发构建: https:...

2
21
发表了资讯
2017/04/04 07:32

Pixi.js 4.4.4 发布,超快的 HTML5 2D 渲染引擎

Pixi.js 是一个超快的 HTML5 2D 渲染引擎,目标是提供一个快速的、轻量级而且是兼任所有设备的 2D 库。 Pixi.js 提供无缝 Canvas 回退,支持主流浏览器,包括桌面和移动。 Pixi 渲染器可以开发者享受到硬件加速,但并不需要了解 WebGL。 Pixi.js 4.4.4 修复了以下问题: WHITE 和 EMPTY 的基础 Textures 没有被真正的保护 进一步修复与嵌套和显示 tree positioning 相关的交互问题 将 autoFit 属性添加到 Filter 以禁用过滤器大...

1
33
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/04/10 10:10

PIXIJS的一些使用

  我发现pixijs在国内简直就是一片静土啊,只有那么一点点的微弱的不能再微弱的声音。   我在这里整理了下我使用过程中解决和可能理解的一些问题吧,都是一个个点,而不是完整的示例。   先放官网示例: https://pixijs.io/examples-v4/#/demos-basic/container.js     官网文档:http://pixijs.download/release/docs/PIXI.Application.html (纯英文的,阅读起来还是有些吃力)    //创建一个示例 new PIXI.Applic...

0
0
发表了博客
2019/11/19 09:46

pixijs shader教程

pixijs 写shader 底层都封装好了 只要改改片段着色器就行了 pxijs一定刚要设置支持透明 不然 颜色不支持透明度了 const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Create background image const background = PIXI.Sprite.from('examples/assets/bg_grass.jpg'); background.width = app.screen.width; background.height = app.screen.height; app.stage.addChild(back...

0
0
发表了博客
2019/02/21 13:26

使用PixiJS做一个小游戏

PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。 官方网址: http://www.pixijs.com/ 知识点 做一个小游戏,我们使用到PixiJS的功能不多,只需要了解以下几个点即可快速上手。 PIXI.Application 创建一个游戏时第一个要初始化的对象。 stage 舞台,我们可以看做是所有对象的根节点,类似于document。 PIXI.loader 资源加...

0
0
发表了博客
2020/06/25 16:35

PIXIJS性能优化之图集加载

介绍 使用pixi去开发一个稍微复杂的项目的时候就会涉及到各种类型的图片加载成为纹理,之后GPU去渲染,但是在图片数量较多但尺寸较小时,分开去加载还是比较消耗性能的,因为浏览器的并行下载都是有限制的,下载图片的时候可能就会影响到首页的接口请求速度以及其他更重要的UI渲染速度,因此建议当首次加载有此类情况的时候最好去使用图集的方式来实现。 如何实现 纹理图集的实现分为雪碧图的制作导出、场景内加载两部分,接下来...

0
0
发表了博客
2019/11/19 15:41

pixijs shader 贴图溶解效果教程

pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Create background image const background = PIXI.Sprite.from('/moban/bg_grass.jpg'); background.width = app.screen.width; background.height = app.screen.height; ...

0
0
发表于大前端专区
2014/09/12 17:04

HTML5游戏开发引擎Pixi.js新手入门讲解

在线演示 本地下载 这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用。 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) <scripttype="text/javascript"src="http://cdn.gbtags.com/pixi.js/1.6.1/pixi.js"></script> 引擎使用: 。。。。 。。。。 阅读原文:HTML5游戏开发引擎Pixi.js新手入门讲解...

0
0
2018/11/28 20:51

前端动画渲染引擎pixi.js系列(1)简单介绍及应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/70144835 做Web端已经有些年头了,最近想写几篇比较热门的前端框架的教学文章,毕竟人需要记忆的东西太多,一是怕自己遗忘了,其次是想分享一下自己的一些总结和经验,希望能帮助到一些前端开发人员能有个门槛快速入门来提升自己,如果是非常厉害的前端大牛,可以省略这些文章。 一.PixiJS简介 本次系列要介绍的前端...

0
0
2018/11/28 20:51

前端动画渲染引擎pixi.js系列(4)如何实现鼠标交互事件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/70208945 一.鼠标交互事件概念 鼠标事件交互是指用户通过操作鼠标所触发的事件。常用的交互事件主要有如点击、拖拽等。可以监听到的用户所触发的事件可以分为4类:左键触发,右键触发,触摸屏触发,兼容鼠标和触摸屏的共同触发。如监听点击事件,源码写法是: sprite.on('click', onClick); 其中onClick是触发点击事...

0
0
2018/11/28 20:51

前端动画渲染引擎pixi.js系列(2)container和Sprite的概念和继承关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/70174268 博主曾经有过2年的AS3开发经验,发现PixiJS框架与AS3有太多相似之处,就连对象的函数和事件都大体类似。曾经有过AS3开发经验的前端朋友,对容器、精灵的概念应该都不陌生。 一.container容器和Sprite精灵概念 (1)容器表示显示对象的集合。它是作为其他对象的容器的所有显示对象的基类,即容器是用来装载多个...

0
0
2018/11/28 20:52

前端动画渲染引擎pixi.js系列(9)如何生成缩略图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/72528745 pixi引擎是将图案都绘制到一个根canvas对象中,观察下面创建canvas对象的源码: var app = new PIXI.Application(800, 500, {   backgroundColor: 0x1099bb }); document.body.appendChild(app.view); 其中,app.view就是根canvas对象。通过查看canvas的API可以知道,它有一个函数.toDataURL("image/png...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
117 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部