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

Overview

Create and display interactive graphics, build scenes and animated transitions, make cross-platform, responsive games and applications for multiple screen resolutions, and use Pixi.js’s spectacular WebGL rendering effects. Learn how to create applications for desktop and touch-screen devices, and how to use the best open-source plugins to extend Pixi.js’s capabilities in a myriad of exciting ways.

If you've ever wondered what you need to know to start making games, or what technology you need to build high-performance mobile apps, this book will show you the way. Learn Pixi.js is your one-stop shop for everything you need to know to quickly start making spectacular cross-platform interactive games and animations.

Take a step-by-step tour of Pixi.js's features by building fun game projects.

Learn how to use Pixi.js to make richly interactive graphics and all kind of cross-platform applications.

Learn Pixi.js is a fun and practical brief introduction to using the powerful Pixi.js graphics-rendering engine for making websites, games and mobile apps.

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