Phaser 4 examples

Static

  • 24 examples

Examples 24

Bitmap Text from Texture AtlasDemonstrates how to create and use Bitmap Fonts where the font textures are stored inside a texture atlas frame rather than as standalone images.Bitmap Text from Texture AtlasDemonstrates how to initialize and display a Bitmap Text object using font glyphs stored as a frame within a larger texture atlas.Bitmap Text in Canvas ModeDemonstrates rendering and animating bitmap fonts using the Canvas renderer, including dynamic text updates and tweening properties like font size and scale.Bitmap Text OriginDemonstrates how setting the origin (anchor point) affects the positioning and alignment of Bitmap Text objects relative to their coordinates.Bitmap Text Origin and ScaleLearn how to center Bitmap Text by setting its origin and apply scaling to change its size relative to its center point.Bitmap Text RotationDemonstrates how to rotate a Bitmap Text object using a tween and update its string content dynamically on user input.Bitmap Text ScalingLearn how to manipulate the scale of a Bitmap Text object using independent tweens for the X and Y axes.BitmapText Blend ModeThis example demonstrates how to apply a blend mode to a BitmapText object and animate its scale over a background image.BitmapText Drop ShadowDemonstrates how to apply a drop shadow effect to static BitmapText objects, with control over the shadow's offset, color, and alpha.BitmapText Max WidthThis example demonstrates how to use the setMaxWidth method to automatically wrap BitmapText across multiple lines once it reaches a specific width, and shows how the maxWidth property can be dynamically updated using a Tween.BitmapText Max Width and Dynamic ContentDemonstrates how BitmapText behaves when content is appended frame-by-frame while a maximum width constraint is active.BitmapText Origin and ScaleLearn how to set the origin and scale of a BitmapText object, including negative scaling to flip text, and visualize its global bounds.BitmapText Width and Height with ScalingDemonstrates how the width and height properties of a BitmapText object reflect its dimensions as it is scaled via tweens.Change Bitmap Text Font SizeLearn how to dynamically update the font size of a static BitmapText object using pointer events.Change BitmapText FontDemonstrates how to swap the font of a single BitmapText object at runtime using the setFont method.Get Bitmap Text BoundsDemonstrates how to use the getTextBounds method to retrieve the dimensions and global position of BitmapText objects, useful for layout and alignment.Get BitmapText BoundsDemonstrates how to retrieve the world-space bounding box of a BitmapText object, accounting for scale and origin, and visualize it using a Graphics stroke.Large Content Bitmap TextDemonstrates rendering a large amount of text from an external file using a single BitmapText object with vertical scrolling.Multi Line Bitmap Text AlignmentDemonstrates how to align multiple lines of text within a single BitmapText object using right-alignment.Multi-Line Bitmap TextLearn how to display multiple lines of text within a single BitmapText object using newline characters.Multiline Bitmap Text BoundsLearn how to use the getTextBounds method to calculate the dimensions of a multiline Bitmap Text object and visualize its global bounding box.Scaled BitmapText BoundsDemonstrates how to use getTextBounds to accurately retrieve the global size and position of a BitmapText object while it is being dynamically scaled.Static and Dynamic Bitmap TextDemonstrates how to load multiple bitmap fonts and display static, multi-line, and dynamically updated bitmap text.Tinted Bitmap TextDemonstrates how to apply color tints to Bitmap Text, including multi-color gradient tints for each corner of the object.