O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

Book Description

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.

    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