Sprite: Difference between revisions

From VNDev Wiki
Papayaisla (talk | contribs)
ported from devtalk faq and glossary doc with formatting tweaks and japanese
 
m nav
 
(15 intermediate revisions by 5 users not shown)
Line 1: Line 1:
A '''sprite''' (Japanese term: 立ち絵, Hepburn: '''tachie''', lit. "standing image") is an image used to represent a character. An NPC with one line will probably only have a single static sprite/image (if they’re visually represented at all). Characters with more screen time generally have multiple expressions, poses, and/or outfits and would thus have multiple sprites. Some sprites may be animated (commonly with programs like Live2D or EmoFuri), but most games currently have static sprites.
A '''sprite''' (Japanese term: 立ち絵, Hepburn: '''tachie''', lit. "standing image") is an image used to represent a character. An NPC with one line will probably only have a single static sprite/image (if they’re visually represented at all). Characters with more screen time generally have multiple expressions, poses, and/or outfits and would thus have multiple sprites. Some sprites may be animated (commonly with programs like Live2D or EmoFuri), but most games currently have static sprites.
Sometimes, sprites are considered a subtype of '''actors''', a term which includes any individual on-screen visual representation of a character in a visual novel. Actors which may or may not be considered sprites include 3D character models, rigs such as those made in [[Live2D]], and pre-rendered videos of characters.
== Compositing ==
[[File:Sprite Compositing.png|right|thumb|300px|An example of sprite compositing. (1) The parts of the sprite, with separate hair overlay, eyebrows, eyes, blush, and mouth. (2) The parts are layered on top of each other with visible bounding boxes. (3) The final sprite]]
Sprite compositing is when multiple images are compiled together in "real time" to be viewed as a single entity. Generally used to layer different elements of a sprite together to allow for smaller overall game file size rather than having a completely different pre-compiled image for each different pose and expression combination.
In [[Ren'Py]], sprite compositing is referred to as '''Layered Images''' or '''Live Composite'''. (Layered Images being the most recent tool, allowing for more complex sprites.)
{| class="wikitable" style="margin:left"
|+ Sprite composition example
|-
! scope="row"| Overlay
| blush
| red
| sweat
|-
! scope="row"| Brow
| flat
| arch
| furrow
| raise
| oneraise
| pinch
| question
|-
! scope="row"| Eye
| open
| wide
| lid
| tight
| closedown
| closeup
| wink
|-
! scope="row"| Talk
| neutral
| smile
| happy
| surprised
| sad
| serious
| tease
| annoyed
|-
! scope="row"| Mouth
| neutral
| smile
| happy
| surprised
| sad
| serious
| tease
| annoyed
|-
! scope="row"| Look
| front
| away
| up
| down
|-
|}
(Credits to ingthing, who posted this chart used in [https://forsythiaproductions.itch.io/of-sense-and-soul/devlog/480454/sprites-camera-action-vn-cinematography-in-of-sense-and-soul ''Of Sense and Soul'']. [https://docs.google.com/spreadsheets/u/0/d/1MoeA3QyQnxJRFSQd2BCqAjq_KkaW9KI4f6LGje-q0EM/htmlview# Here's another example as well.])
==Sprite Sheets==
A sprite sheet is an image with a sprite’s expressions/poses, usually used with a game or animation engine for composite/multi state sprite optimization. Packing sprites into a single sheet optimizes file load and render time in many cases where it's needed.
In visual novel terms, it may also refer to an aesthetic layout of a character sprite’s images that shows the different poses/expressions of a character, usually for inclusion in the game’s art book or for promotional purposes (ex: crowdfunding graphics).
==3D Sprites==
{{image requested}}
A 3D sprite is an asset rendered from a three-dimensional model and used as a two-dimensional image. 3D sprites can be created using dedicated software such as Blender or Maya. The advantage of using 3D models is that they can be easily modified and reused for multiple purposes, while maintaining a consistent visual style. They can also be used to represent objects like items,  vehicles, and other background elements.
==Animation==
{{image requested}}
Animations in visual novels can be created by sequencing sprites or frames together. Animations can range from simple character movements, like blinking or head tilts, to complex actions and sequences. The quality of the animation will depend on the skill of the animator and the time dedicated to the project.
The '''frame rate''', also known as frames per second (FPS), refers to the number of individual images displayed per second. A higher frame rate will usually result in smoother animations, while a lower frame rate can make the animation appear jarring or stuttery. The optimal frame rate will depend on the target platform and the demands of the animation. For reference, cartoons and anime are typically drawn at 8 to 24 FPS, and most cinematic films are displayed at 24 FPS.
The '''timing''' of an animation refers to how fast or slow things move in the animation. Good timing can make an animation feel more fluid and natural, while poor timing can make it appear stiff or unnatural. An example of bad timing would be an animation where a character's arm moves in an uneven or jerky manner.
'''Tips for creating good animation:'''
* Plan out your animation ahead of time, either through storyboards or rough sketches. This will help you visualize the final product and make it easier to plan out the timing and poses.
* Study examples of good animation, both in visual novels and in other media. This will help you develop an eye for good timing and poses.
===Tools for creating animation===
There are many tools available for creating animations for visual novels. Some popular options include:
* [https://www.clipstudio.net/en/ Clip Studio Paint] - A digital painting and animation software that is designed for use on both Windows and Mac. It has a comprehensive set of tools for creating animations, including frame-by-frame animation, bone rigging, and lip-syncing.
* [https://dragonbones.github.io/en/index.html DragonBones] - An open source 2D skeletal animation toolkit for Flash, HTML5, and Unity games that is popular in the indie game development community
* [http://esotericsoftware.com/ Spine] - A 2D skeletal animation tool designed specifically for creating animations for video games. It has a comprehensive set of features, including bone rigging, IK (inverse kinematics) splines, and blend spaces.
* [https://www.live2d.com/en/ Live2D] - An animation tool that can be used to create smooth, high-quality animations.
===With Transforms===
{{empty section}}
===With Live2D===
{{empty section}}
===With Spine===
{{empty section}}
{{development nav}}
[[Category:Art]]

Latest revision as of 10:38, 1 November 2024

A sprite (Japanese term: 立ち絵, Hepburn: tachie, lit. "standing image") is an image used to represent a character. An NPC with one line will probably only have a single static sprite/image (if they’re visually represented at all). Characters with more screen time generally have multiple expressions, poses, and/or outfits and would thus have multiple sprites. Some sprites may be animated (commonly with programs like Live2D or EmoFuri), but most games currently have static sprites.

Sometimes, sprites are considered a subtype of actors, a term which includes any individual on-screen visual representation of a character in a visual novel. Actors which may or may not be considered sprites include 3D character models, rigs such as those made in Live2D, and pre-rendered videos of characters.

Compositing

An example of sprite compositing. (1) The parts of the sprite, with separate hair overlay, eyebrows, eyes, blush, and mouth. (2) The parts are layered on top of each other with visible bounding boxes. (3) The final sprite

Sprite compositing is when multiple images are compiled together in "real time" to be viewed as a single entity. Generally used to layer different elements of a sprite together to allow for smaller overall game file size rather than having a completely different pre-compiled image for each different pose and expression combination.

In Ren'Py, sprite compositing is referred to as Layered Images or Live Composite. (Layered Images being the most recent tool, allowing for more complex sprites.)

Sprite composition example
Overlay blush red sweat
Brow flat arch furrow raise oneraise pinch question
Eye open wide lid tight closedown closeup wink
Talk neutral smile happy surprised sad serious tease annoyed
Mouth neutral smile happy surprised sad serious tease annoyed
Look front away up down

(Credits to ingthing, who posted this chart used in Of Sense and Soul. Here's another example as well.)

Sprite Sheets

A sprite sheet is an image with a sprite’s expressions/poses, usually used with a game or animation engine for composite/multi state sprite optimization. Packing sprites into a single sheet optimizes file load and render time in many cases where it's needed.

In visual novel terms, it may also refer to an aesthetic layout of a character sprite’s images that shows the different poses/expressions of a character, usually for inclusion in the game’s art book or for promotional purposes (ex: crowdfunding graphics).

3D Sprites

A 3D sprite is an asset rendered from a three-dimensional model and used as a two-dimensional image. 3D sprites can be created using dedicated software such as Blender or Maya. The advantage of using 3D models is that they can be easily modified and reused for multiple purposes, while maintaining a consistent visual style. They can also be used to represent objects like items, vehicles, and other background elements.

Animation

Animations in visual novels can be created by sequencing sprites or frames together. Animations can range from simple character movements, like blinking or head tilts, to complex actions and sequences. The quality of the animation will depend on the skill of the animator and the time dedicated to the project.

The frame rate, also known as frames per second (FPS), refers to the number of individual images displayed per second. A higher frame rate will usually result in smoother animations, while a lower frame rate can make the animation appear jarring or stuttery. The optimal frame rate will depend on the target platform and the demands of the animation. For reference, cartoons and anime are typically drawn at 8 to 24 FPS, and most cinematic films are displayed at 24 FPS.

The timing of an animation refers to how fast or slow things move in the animation. Good timing can make an animation feel more fluid and natural, while poor timing can make it appear stiff or unnatural. An example of bad timing would be an animation where a character's arm moves in an uneven or jerky manner.

Tips for creating good animation:

  • Plan out your animation ahead of time, either through storyboards or rough sketches. This will help you visualize the final product and make it easier to plan out the timing and poses.
  • Study examples of good animation, both in visual novels and in other media. This will help you develop an eye for good timing and poses.

Tools for creating animation

There are many tools available for creating animations for visual novels. Some popular options include:

  • Clip Studio Paint - A digital painting and animation software that is designed for use on both Windows and Mac. It has a comprehensive set of tools for creating animations, including frame-by-frame animation, bone rigging, and lip-syncing.
  • DragonBones - An open source 2D skeletal animation toolkit for Flash, HTML5, and Unity games that is popular in the indie game development community
  • Spine - A 2D skeletal animation tool designed specifically for creating animations for video games. It has a comprehensive set of features, including bone rigging, IK (inverse kinematics) splines, and blend spaces.
  • Live2D - An animation tool that can be used to create smooth, high-quality animations.

With Transforms

With Live2D

With Spine