Import an image and create a Sprite

This exercise uses assets/resources/images/pink-target.png. Pink Demo references its SpriteFrame from the scene. Organize assets in your own projects according to their actual use.

Import and inspect the image

1. Place it under assets/resources/images.
2. Wait for the asset view to show the imported image and its .meta information.
3. Open the preview and check transparency, proportions, and colors.
4. Check the Output panel for import errors.

Use the image in a scene

Open main.scene, expand Canvas/Target in the Hierarchy, and select TargetSprite. Pink Demo's node, Sprite component, and SpriteFrame reference are saved in the scene. A Mask on the parent Target clips the image to a circle. GameController's ClickGame component binds the target through the Inspector and handles clicks, scoring, and movement.

Check the SpriteFrame reference in the Inspector

If the target is invisible, check import success, the Sprite's pink-target SpriteFrame, node activation, a nonzero UI size, and the camera's UI_2D visibility. If it appears but clicking does not score, check all three Inspector references on GameController.

For your own Sprite, drag an image's SpriteFrame from the asset view onto a Sprite component, or create a Sprite node first and assign the reference. Save and reopen the scene to confirm the reference is persisted.

Verify the change

• The asset view opens the image.
• Preview starts with the target at its fixed position.
• Clicking scores and moves the target.
• References remain valid after reopening the project.