掌握Pixi.js：HTML5游戏与Web图形的强大引擎指南

需积分: 33 166 浏览量更新于2024-07-20 收藏 4.78MB PDF 举报

"《Learn Pixi.js》是一本专门介绍Pixi.js这款高性能HTML5 2D渲染引擎的教程书籍，作者是Rex van der Spuy。Pixi.js以其快速的性能和在微信浏览器中的广泛应用而受到欢迎，尤其是在游戏开发和网页图形设计领域。它基于WebGL技术，但特别强调了其使用Canvas回调功能的能力，使得即使是英文版本，配合丰富的插图也能帮助读者轻松理解和上手。这本书提供了详细的指南，教读者如何利用Pixi.js创建出色的互动图形，无论是为了构建游戏还是优化网页体验。作者深入浅出地讲解了Pixi.js的核心概念、API、渲染流程以及实际项目中的应用技巧。书中涵盖了像素级别的渲染、精灵系统（Sprite Sheets）、纹理管理、动画、交互逻辑等方面的知识，让读者能够迅速掌握这个强大的工具。版权方面，该书受版权保护，未经Springer出版社许可，不得进行任何形式的复制或传播，包括翻译、重印、电子化改编等。然而，对于学术评价、教学目的或者特定计算机系统的录入执行等有限度的引用，需要事先获得版权许可。《Learn Pixi.js》是一本实用且详尽的资源，适合对Pixi.js有深入学习需求的专业开发者和想要提升HTML5图形能力的设计师。"

■ INTRODUCTION

Tink: Mouse and touch interactivity

github.com/kittykatattack/tink

Dust: Particle effects

github.com/kittykatattack/dust

SpriteUtilities: Advanced sprite creation utilities

github.com/kittykatattack/spriteUtilities

Sound.js: Music and sounds effects

github.com/kittykatattack/sound.js

It’s everything you need to create anything you can imagine!

What Do You Have to Know?

To make use of this book, you should have a reasonable understanding of HTML and

JavaScript. You don’t have to be an expert or think of yourself as a “programmer.” You’re

just an ambitious beginner with an eagerness to learn—just like I am!

If you don’t know HTML and JavaScript, the best place to start learning is the book

Foundation Game Design with HTML5 and JavaScript. I know for a fact that it’s the best

book, because I wrote it! It will give you all the coding and conceptual background you

need to begin using this book. In fact, if you’ve read Foundation Game Design, then Learn

Pixi.js is the perfect sequel.

This is not a tech-heavy book! It’s a fun, practical book that gets to the point—fast.

I’m not going to bog you down with mountains of heavy code or theory. I’ve kept the code

simple and architecturally flat and expect that you’re smart enough to be able to look at

the examples and apply them to your own projects, in your own way. This book is just the

map; it’s up to you to take the journey.

■ Note If you’re curious and want to take a deeper technical dive into video game

programming, make sure to check out this book’s hip and sophisticated older sister:

Advanced Game Design with HTML5 and JavaScript. It shows how you can code a display

engine similar to Pixi from scratch, as well as all the essential code you must know to make

all kinds of 2D action games. It’s a great complement to Learn Pixi.js, and you can share

concepts and code between both books.

■ INTRODUCTION

xxiv

Running a Web Server

To use Pixi, you’ll also have to run a web server in your root project directory. The best

way is to use node.js (nodejs.org) and then install the extremely easy-to-use http-server

(github.com/nodeapps/http-server). However, you have to be comfortable working

with the Unix command line, if you want to do that.

■ Note Are you afraid of the Unix command line? Don’t be! Unix is a wonderfully retro-future

way to scare your parents, and you can learn it in a few hours. Maybe start with the classic

tutorial “Learn Unix in 10 minutes” (freeengineer.org/learnUNIXin10minutes.html) and

follow it up with the “Unix Cheat Sheet” (www.rain.org/~mkummel/unix.html). Install a

great little script called “Z” (github.com/rupa/z) to help you navigate the file system, and

then start playing around. You’ll also find dozens of videos on the Web for Unix for beginners,

including Michael Johnston’s excellent two-part series.

But if you don’t want to mess around with the command line just yet, try the

Mongoose web server (cesanta.com/mongoose.shtml) or just write all your code using

one of the many HTML5-based text editors: Brackets, Light Table, or Atom. Any of these

will launch a built-in web server for you automatically, when you run your code in a

browser.

A Survival Guide for Future Pixi API Versions

This book was written when Pixi was in version 3, but Pixi is a fast-changing, living code

library. What that means is that if you’re using a future version of Pixi and run some

code that isn’t completely compatible with the code in this book, you’ll have to use your

judgment about how to adapt it to the new version. The good news is that Pixi’s core user-

facing API has been stable since version 1, so most of the code and techniques in this

book should be relevant to future versions. But you’ll have to stay on your toes! Following

are some Future Pixi survival tips.

• The object or method you’re trying to use might have been

renamed. Pixi’s development team sometimes likes to rearrange

the furniture a bit, and they’ll do so on a whim. That means

they might change the names of some object or method names

or give them new locations. For example, in version 2.0, the

TextureCache object was located in PIXI.TextureCache, while in

version 3.0, it was moved to PIXI.utils.TextureCache. Likewise,

the setFrame method became the frame property. These aren’t

deal breakers. They’re just cosmetic differences, and the code still

works in the same way. But you’ll have to be prepared to research

possible future changes such as these and update your code if the

JavaScript console gives you any errors or warnings.

www.allitebooks.com

剩余229页未读，继续阅读

vvtidy

粉丝: 0
资源: 1

掌握Pixi.js：HTML5游戏与Web图形的强大引擎指南

PIXI.TextInput:pixi.js插件，提供了一种向pixijs阶段添加文本输入的便捷方法

pixi-example:我的第一个使用PIXI.js的游戏项目

pixi-spine, 支持脊椎支持的Pixi.js 插件.zip

Pixi.js学习 （六）数组 源码

Pixi.js学习 （二）创建Pixi应用和stage 源码

Pixi.js学习 （三）属性 函数 事件 源码

Pixi.js学习 （一） Pixi的安装与配置 测试环境项目 源码

Pixi.js学习 （七）碰撞检测与定时动画 源码

Pixi.js学习 （五）动画效果与变量逻辑控制 源码

Pixi.js学习 （四）鼠标跟随、元素组合与图片位控 源码

最新资源

Pixi.js学习（六）数组源码

Pixi.js学习（二）创建Pixi应用和stage 源码

Pixi.js学习（三）属性函数事件源码

Pixi.js学习（一） Pixi的安装与配置测试环境项目源码

Pixi.js学习（七）碰撞检测与定时动画源码

Pixi.js学习（五）动画效果与变量逻辑控制源码

Pixi.js学习（四）鼠标跟随、元素组合与图片位控源码