Pixi入门第一章:绘制一个小精灵

2023-12-24 23:28

本文主要是介绍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入门第一章:绘制一个小精灵的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/533486

相关文章

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

使用Python绘制可爱的招财猫

《使用Python绘制可爱的招财猫》招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常出现在亚洲文化的商店、餐厅和家庭中,今天,我将带你用Python和matplotlib库从零开始绘制一... 目录1. 为什么选择用 python 绘制?2. 绘图的基本概念3. 实现代码解析3.1 设置绘图画

Python绘制土地利用和土地覆盖类型图示例详解

《Python绘制土地利用和土地覆盖类型图示例详解》本文介绍了如何使用Python绘制土地利用和土地覆盖类型图,并提供了详细的代码示例,通过安装所需的库,准备地理数据,使用geopandas和matp... 目录一、所需库的安装二、数据准备三、绘制土地利用和土地覆盖类型图四、代码解释五、其他可视化形式1.

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码:效果:总结 代码:import randomimport timefrom math

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al