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

Table of contents

1. Cover
2. Title
3. Copyright
4. Dedication
5. Contents at a Glance
6. Contents
7. About the Author
8. About the Technical Reviewer
9. Acknowledgments
10. Introduction
11. Chapter 1: Making Sprites
    1. Creating the Renderer and Stage
       1. Render Options
       2. Customizing the Canvas
       3. Scaling the Canvas to the Browser Window
    2. Pixi Sprites
       1. Understanding Textures and the Texture Cache
       2. Loading Images
       3. Displaying Sprites
       4. Removing Sprites
       5. Using Aliases
    3. A Little More About Loading Things
       1. Making a Sprite from an Ordinary HTML Image Object or Canvas
       2. Assigning a Name to a Loading File
       3. Monitoring Load Progress
       4. More About Pixi’s Loader
    4. Positioning Sprites
       1. X and Y Properties
       2. Size and Scale
       3. Rotation
    5. Making a Sprite from a Tileset Sub-image
       1. Preventing Texture Bleed
    6. Using a Texture Atlas
       1. Creating the Texture Atlas
       2. Loading the Texture Atlas
       3. Creating Sprites from a Loaded Texture Atlas
       4. Making the Blob Monsters
       5. The Complete Code
    7. Summary
12. Chapter 2: Moving Sprites
    1. Create a Game Loop
    2. Using Velocity Properties
    3. Game States
    4. Keyboard Movement
    5. Adding Acceleration and Friction
    6. Adding Gravity
    7. Containing Movement Inside a Fixed Area
       1. Using ES6 Sets
       2. The contain Function
    8. Summary
13. Chapter 3: Shapes, Text, and Groups
    1. Making Shapes
       1. Rectangles
       2. Circles
       3. Ellipses
       4. Straight Lines
       5. Polygons
       6. Curved Lines
       7. Drawing Arcs
    2. Improving Graphics Rendering
       1. Antialiasing for WebGL Graphics
       2. Drawing on a Single Graphics Context
       3. Redrawing Animated Graphics Each Frame
    3. Displaying Text
       1. The Text Object
       2. Loading Font Files
       3. Using Bitmap Fonts
    4. Grouping Sprites
       1. Using a Container
       2. Using a ParticleContainer
    5. Summary
14. Chapter 4: Making Games
    1. Collision Detection
       1. Installing and Setting Up Bump
       2. Using the hitTestRectangle Method
       3. Collision Detection in Action
    2. Treasure Hunter
       1. The Code Structure
       2. Initialize the Game in the Setup Function
       3. Playing the Game
    3. Summary
15. Chapter 5: Animating Sprites
    1. Using SpriteUtilities
    2. MovieClip Sprites
       1. The Even Easier Way
       2. Using MovieClip Sprites
       3. MovieClip Properties and Methods
       4. Make MovieClip Sprites Using a Texture Atlas
       5. Using the frameSeries Utility Function
    3. Animation States
       1. Making a Sprite with a State Player
       2. Defining Sprite States
       3. Making a Walking Sprite
       4. Creating Frames for Animations
    4. Particle Effects
       1. Add a Little Pixi Dust
       2. Making Particles
       3. Using ParticleContainer
       4. Customizing the Particle Options
       5. Using a Particle Emitter
    5. Summary
16. Chapter 6: Visual Effects and Transitions
    1. Tiling Sprites
    2. Tools for Working with Textures
       1. Using generateTexture
       2. Using cacheAsBitmap
       3. Using RenderTexture
    3. Tinting
    4. Masking
    5. Blend Modes
    6. Filters
    7. Video Textures
    8. Working with Multiple Resolutions
    9. Rope Mesh
    10. Tweening and Transitions
        1. Setting Up and Running Charm
        2. Sliding Tweens
        3. Setting the Easing Types
        4. Using slide for Scene Transitions
        5. Following Curves
        6. Following Paths
        7. A Few More Tween Effects
    11. Summary
17. Chapter 7: Mouse and Touch Events
    1. Setting Up Tink
       1. Setting the Optional Scale
    2. A Universal Pointer
    3. Pointer Interaction with Sprites
    4. Drag-and-Drop Sprites
    5. Buttons
       1. What Are Buttons?
       2. Making Buttons
       3. Making an Interactive Sprite
    6. Case Study: Pixie Perilousness!
       1. Creating the Scrolling Background
       2. Creating the Pillars
       3. Making Pixie Fly
       4. Emitting Pixie Dust
       5. Fine-Tuning the Fairy’s Animation
       6. Collisions with the Blocks
       7. Resetting the Game
       8. Taking It Further
    7. Your Next Steps
18. Appendix: Pixie Perilousness!—Complete Code
    1. The HTML Code
    2. The JavaScript Code
19. Index