本文主要是介绍Pixi入门第一章:绘制一个小精灵,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
之前有介绍过threeJs做3D场景的教程,但是发现web3D还是有很多局限性的,尤其是在绘制地图一方面,3D场景必须通过射线选取物体,而且会因为相机视角的问题出现偏差,另一方面3D在渲染性能上消耗远大于2D的场景,在动态绘制线的时候会出现卡顿等情况,所以最终又选择一个2D的框架开始学习,这里选用pixi.js。
下面来段仪式性的介绍:
1.什么是pixi.js?简单来说它是一个2D sprite渲染引擎,用于创建交互式的图形和动画,它提供了简单易用的API,使开发者可以通过 JavaScript 和其他 html5 技术来创建高性能的图形应用。Pixi.js 可以用于游戏开发、数据可视化、广告制作等各种场景,它具有快速渲染、跨平台支持和丰富的功能特性。
2.Pixi.js的起源, Pixi.js由Goodboy Digital开发,于2013年首次发布。起初,Goodboy Digital是一家专注于游戏和互动媒体开发的公司。他们发现市场上存在着许多复杂而笨重的2D渲染引擎,这些引擎对于移动设备上的性能和资源要求较高。为了解决这个问题,他们决定开发一个简单、高效且易于使用的2D渲染引擎,以满足他们自己的需求。 Goodboy Digital团队开始开发Pixi.js,并将其作为内部工具在自己的项目中使用。随着时间的推移,他们将其开源,并发布到了GitHub上。这样其他开发者也可以使用和贡献这个引擎。Pixi.js迅速受到了开发者的喜爱,因为它具有出色的性能和易用性。现在,Pixi.js已经成为了一个流行的选择,被广泛应用于游戏开发、数据可视化、广告和其他交互式应用程序的开发中。
3.Pixi.js特点
高性能:Pixi.js 通过利用 WebGL 技术实现硬件加速渲染,可以在多种平台上流畅运行。它经过了优化和调整,以提供快速而有效的渲染管道。
跨平台:Pixi.js 可以在多个平台上运行,包括Web、移动和桌面应用程序。无论是在浏览器、手机还是桌面设备上,都能够提供一致的表现和用户体验。
易于使用:Pixi.js 提供简单且直观的 API ,容易上手和学习。它提供了一套丰富的功能,包括精灵(Sprite)、粒子系统(Particle System)、滤镜(Filter)等,使开发者能够创建各种类型的游戏和交互式应用。
可扩展性:Pixi.js 具有良好的可扩展性,支持插件和自定义扩展。开发者可以根据自己的需求来定制和扩展 Pixi.js 的功能,并与其他库或框架集成。
跨浏览器兼容性:Pixi.js 在广泛的浏览器中都能良好地运行,包括 Chrome、Firefox、Safari、Edge 等。它还提供了一致的 API ,无论是在移动设备上运行的浏览器还是桌面上的现代浏览器。
下面先通过一个简单的例子创建第一个2D的场景:不过在此之前要先安装pixi.js,安装命令:
npm install --save pixi.js
安装完成后先引入pixi.js,然后后创建一个pixi的场景,并设置宽高颜色等参数,并添加到body中,再通过图片创建一个图片,pixi里叫sprite,意思是小精灵,创建后设置x,y的值,添加到舞台Stage中(类似three的scene),最终你就可以得到一个简单的pixi页面了,当然直接用canvas也可以很容易实现这些,但是后面的内容就可以慢慢看出pixi的优势了,好了第一章入门就到这里,代码下方放置了效果图可以参考下效果。
<template><div ref="pixiContainer"></div>
</template>
<script>import * as PIXI from 'pixi.js';export default {mounted() {// 创建Pixi.js应用程序const app = new PIXI.Application({width: 500, // default: 800 宽度height: 500, // default: 600 高度antialias: true, // default: false 反锯齿transparent: false, // default: false 透明度resolution: 1, // default: 1 分辨率background: '#1099bb',// resizeTo: window,});//将此场景添加到html页面的body中document.body.appendChild(app.view);// 通过一个图片创建一个小精灵(就是一个对象可以是图片可以是固定的形状或者其他的)const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');bunny.x = 0;//设置精灵的x轴位置bunny.y = 0;//设置精灵的y轴位置app.stage.addChild(bunny);//将精灵添加到舞台上,也就是stage上,}};
</script>
这篇关于Pixi入门第一章:绘制一个小精灵的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!