book

Learn Pixi.js: Create Great Interactive Graphics for Games and the Web

Name: Learn Pixi.js: Create Great Interactive Graphics for Games and the Web
Author: Rex van der Spuy
ISBN: 9781484210949

by Rex van der Spuy

September 2015

Beginner

240 pages

4h 44m

English

Apress

Read now

Unlock full access

Cover
Title
Copyright
Dedication
Contents at a Glance
Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction

Chapter 1: Making Sprites
Creating the Renderer and StageRender OptionsCustomizing the CanvasScaling the Canvas to the Browser WindowPixi SpritesUnderstanding Textures and the Texture CacheLoading ImagesDisplaying SpritesRemoving SpritesUsing AliasesA Little More About Loading ThingsMaking a Sprite from an Ordinary HTML Image Object or CanvasAssigning a Name to a Loading FileMonitoring Load ProgressMore About Pixi’s LoaderPositioning SpritesX and Y PropertiesSize and ScaleRotationMaking a Sprite from a Tileset Sub-imagePreventing Texture BleedUsing a Texture AtlasCreating the Texture AtlasLoading the Texture AtlasCreating Sprites from a Loaded Texture AtlasMaking the Blob MonstersThe Complete CodeSummary
Chapter 2: Moving Sprites
Create a Game LoopUsing Velocity PropertiesGame StatesKeyboard MovementAdding Acceleration and FrictionAdding GravityContaining Movement Inside a Fixed AreaUsing ES6 SetsThe contain FunctionSummary
Chapter 3: Shapes, Text, and Groups
Making ShapesRectanglesCirclesEllipsesStraight LinesPolygonsCurved LinesDrawing ArcsImproving Graphics RenderingAntialiasing for WebGL GraphicsDrawing on a Single Graphics ContextRedrawing Animated Graphics Each FrameDisplaying TextThe Text ObjectLoading Font FilesUsing Bitmap FontsGrouping SpritesUsing a ContainerUsing a ParticleContainerSummary
Chapter 4: Making Games
Collision DetectionInstalling and Setting Up BumpUsing the hitTestRectangle MethodCollision Detection in ActionTreasure HunterThe Code StructureInitialize the Game in the Setup FunctionPlaying the GameSummary
Chapter 5: Animating Sprites
Using SpriteUtilitiesMovieClip SpritesThe Even Easier WayUsing MovieClip SpritesMovieClip Properties and MethodsMake MovieClip Sprites Using a Texture AtlasUsing the frameSeries Utility FunctionAnimation StatesMaking a Sprite with a State PlayerDefining Sprite StatesMaking a Walking SpriteCreating Frames for AnimationsParticle EffectsAdd a Little Pixi DustMaking ParticlesUsing ParticleContainerCustomizing the Particle OptionsUsing a Particle EmitterSummary
Chapter 6: Visual Effects and Transitions
Tiling SpritesTools for Working with TexturesUsing generateTextureUsing cacheAsBitmapUsing RenderTextureTintingMaskingBlend ModesFiltersVideo TexturesWorking with Multiple ResolutionsRope MeshTweening and TransitionsSetting Up and Running CharmSliding TweensSetting the Easing TypesUsing slide for Scene TransitionsFollowing CurvesFollowing PathsA Few More Tween EffectsSummary
Chapter 7: Mouse and Touch Events
Setting Up TinkSetting the Optional ScaleA Universal PointerPointer Interaction with SpritesDrag-and-Drop SpritesButtonsWhat Are Buttons?Making ButtonsMaking an Interactive SpriteCase Study: Pixie Perilousness!Creating the Scrolling BackgroundCreating the PillarsMaking Pixie FlyEmitting Pixie DustFine-Tuning the Fairy’s AnimationCollisions with the BlocksResetting the GameTaking It FurtherYour Next Steps
Appendix: Pixie Perilousness!—Complete Code
The HTML CodeThe JavaScript Code
Index

Content preview from Learn Pixi.js: Create Great Interactive Graphics for Games and the Web

CHAPTER 1

Making Sprites

The basic building block for making things with Pixi is an object called a sprite. Sprites are just images that you can control with code. You can control their position, size, and a host of other properties that are useful for making interactive and animated graphics. Learning to make and control sprites is really the most important thing about learning to use Pixi. If you know how to make and display sprites, you’re just a small step away from starting to make games or any other kind of interactive application.

In this chapter, you’re going to learn everything you need in order to display and position sprites on Pixi’s ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Professional HTML5 Mobile Game Development

Publisher Resources

ISBN: 9781484210949Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Learn Pixi.js: Create Great Interactive Graphics for Games and the Web

by Rex van der Spuy

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.