raea/sprite

<Sprite> is Bevy's sprite: a picture in the 2D world, or one cell of a sprite sheet or atlas. <Mesh2d> holds a flat shape and a ColorMaterial; the shapes are Bevy's 2D primitives (Circle, Rectangle, Ellipse, Annulus, RegularPolygon, Triangle2d and the rest). They draw inside a <Canvas3D>, in Bevy's 2D coordinates: the centre of the frame is the origin, +Y is up, and a unit is a pixel.

import { staticFile } from "raea";
import { Canvas3D } from "raea/camera";
import { Circle, ColorMaterial, Mesh2d, Sprite } from "raea/sprite";

const Shot = () => (
  <Canvas3D layered clearColor="rgb(43, 44, 47)">
    <Sprite src={staticFile("branding/bevy_bird_dark.png")} x={640} y={360} />
    <Mesh2d transform={{ translation: [-300, 0, 0] }}>
      <Circle radius={50} />
      <ColorMaterial color="#e8b04a" />
    </Mesh2d>
  </Canvas3D>
);

import { Annulus, Capsule2d, Circle, CircularSector } from "raea/sprite"

raea/sprite exports 17 components, 1 class, 20 types. Bevy's counterpart: bevy_sprite. Source: sdk/raea/src/sprite.ts.

#Components

#Annulus

From Bevy's bevy_shape::Annulus: A primitive shape formed by the region between two circles, also known as a ring.

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: 2d/2d_shapes.

#Capsule2d

From Bevy's bevy_shape::Capsule2d: A 2D capsule primitive, also known as a stadium or pill shape.

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: 2d/2d_shapes.

#Circle

bevy_math's Circle (radius 0.5 by default, as Bevy's)

Bevy: bevy_shape::Circle.

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: 2d/2d_shapes.

#CircularSector

bevy_math's other 2D primitives, their fields as Bevy reflects them (each over Bevy's default)

Bevy: bevy_shape::CircularSector.

Takes ArcProps's props.

Used in: 2d/2d_shapes.

#CircularSegment

From Bevy's bevy_shape::CircularSegment: A primitive representing a circular segment: the area enclosed by the arc of a circle and its chord (the line between its endpoints).

Takes ArcProps's props.

Used in: 2d/2d_shapes.

#ColorMaterial

bevy_sprite_render's ColorMaterial: a colour (white by default), a texture it tints, and its AlphaMode2d

Used in: 2d/mesh2d_vertex_color_texture, 2d/mesh2d_alpha_mode, 2d/mesh2d, 2d/mesh2d_repeated_texture, 2d/2d_shapes.

#ConvexPolygon

From Bevy's bevy_shape::ConvexPolygon: A convex polygon with N vertices.

Takes VerticesProps's props.

#Ellipse

bevy_math's Ellipse (half_size [1, 0.5] by default)

Bevy: bevy_shape::Ellipse.

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: 2d/2d_shapes.

#Mesh2d

Bevy's Mesh2d with its Transform, a primitive and a ColorMaterial: in Bevy's 2D world.

Takes Mesh2dProps's props.

Used in: shader/shader_material_2d_bindless, shader/shader_material_2d, shader/pipeline_constants, 2d/mesh2d_vertex_color_texture, 2d/mesh2d_alpha_mode, 2d/mesh2d, 2d/mesh2d_repeated_texture, 2d/2d_shapes.

#Polyline2d

From Bevy's bevy_shape::Polyline2d: A series of connected line segments in 2D space.

Takes VerticesProps's props.

Used in: 2d/2d_shapes.

#Rectangle

bevy_math's Rectangle (half_size [0.5, 0.5] by default)

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: shader/shader_material_2d_bindless, shader/shader_material_2d, shader/pipeline_constants, 2d/mesh2d_vertex_color_texture, 2d/mesh2d_alpha_mode, 2d/mesh2d, 2d/mesh2d_repeated_texture, 2d/2d_shapes.

#RegularPolygon

bevy_math's RegularPolygon (circumradius 0.5, 6 sides by default)

Bevy: bevy_shape::RegularPolygon.

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: 2d/2d_shapes.

#Rhombus

From Bevy's bevy_shape::Rhombus: A rhombus primitive, also known as a diamond shape. A four sided polygon, centered on the origin, where opposite sides are parallel but without requiring right angles.

Also takes the props of MeshAttributes (vertex_colors); RingProps (ring, inner).

Used in: 2d/2d_shapes.

#Segment2d

From Bevy's bevy_shape::Segment2d: A line segment defined by two endpoints in 2D space.

Takes VerticesProps's props.

Used in: 2d/2d_shapes.

#Shape2D

A flat shape in 2D, over the 3D, in one colour: Bevy's Mesh2d with a ColorMaterial (raea-sys-sprite). Put it inside the Canvas3D.

Bevy: bevy_sprite_render::mesh2d::color_material::ColorMaterial, bevy_sprite_render::mesh2d::material::MeshMaterial2d<bevy_sprite_render::mesh2d::color_material::ColorMaterial>, bevy_mesh::components::Mesh2d.

Takes Shape2DProps's props.

Used in: animation/color_animation, 2d/text2d.

#Sprite

A picture in 2D, over the 3D: Bevy's Sprite, drawn as a quad with its sprite material, a sprite sheet's cells cut by a texture atlas (raea-sys-sprite). Put it inside the Canvas3D.

Bevy: bevy_sprite::sprite::Sprite, bevy_sprite_render::sprite_mesh::sprite_mesh_material::SpriteMeshMaterial, bevy_sprite_render::mesh2d::material::MeshMaterial2d<bevy_sprite_render::sprite_mesh::sprite_mesh_material::SpriteMeshMaterial>, bevy_sprite_render::sprite_mesh::sprite_extended_material::SpriteMaterial, bevy_image::texture_atlas::TextureAtlasLayout.

Takes SpriteProps's props.

#Triangle2d

From Bevy's bevy_shape::Triangle2d: A triangle in 2D space

Takes VerticesProps's props.

Used in: 2d/2d_shapes.

#Classes

#TextureAtlasBuilder

Pictures packed into one atlas, as Bevy's TextureAtlasBuilder: padding([x, y]) px around each, addTexture in order, then build({ sampler }) (the atlas's own sampler, Bevy's default otherwise).

Bevy: bevy_image::texture_atlas_builder::TextureAtlasBuilder, bevy_image::texture_atlas::TextureAtlasSources.

Used in: 2d/texture_atlas.

#Types

#AlphaMode2d

bevy_sprite_render's AlphaMode2d

type AlphaMode2d = "Opaque" | "Blend" | { Mask: number }

#AnnulusProps

The props of Annulus, tabled there.

#ArcProps

an arc: its radius and half its angle in radians (Bevy's CircularSector::new(r, a) gives half_angle a)

#AtlasSprite

What a takes to show a built atlas: the whole of it, or one of its pictures (atlasPick).

#BuiltAtlas

A built atlas: image the whole atlas as a sprite's picture, sources.handle(texture) one picture of it (TextureAtlasSources::handle).

#Capsule2dProps

The props of Capsule2d, tabled there.

#CircleProps

The props of Circle, tabled there.

#ColorMaterialProps

The props of ColorMaterial, tabled there.

#EllipseProps

The props of Ellipse, tabled there.

#Mesh2dProps

#MeshAttributes

a primitive's mesh attributes: its Mesh::ATTRIBUTE_COLOR, one linear colour per vertex (as mesh.insert_attribute)

#Place2dProps

Where a 2D part is: composition px from the frame's top left, y down (as the page's), its centre there; and its pointer and drag handlers, called as a 3D part's are (2D parts are picked first, the top one by z).

#RectangleProps

The props of Rectangle, tabled there.

#RegularPolygonProps

The props of RegularPolygon, tabled there.

#RhombusProps

The props of Rhombus, tabled there.

#RingProps

a 2D shape as Bevy's Ring: of it and inner (the same shape's fields), or its to_ring(ring, a thickness)

#Shape2DProps

#SpriteImageMode

Bevy's SpriteImageMode, as its reflected value

Bevy: bevy_sprite::sprite::SpriteImageMode.

type SpriteImageMode = | "Auto" | { Scale: "FillCenter" | "FillStart" | "FillEnd" | "FitCenter" | "FitStart" | "FitEnd" } | { Sliced: { border?: number | { min_inset: [number, number]; max_inset: [number, number] }; center_scale_mode?: SliceScaleMode; sides_scale_mode?: SliceScaleMode; max_corner_scale?: number } } | {…

#SpriteProps

#VerticesProps