Are Tweens also Sprites?

Question

What is the difference between a sprite and a tween? When do you use one or the other in game development? I'm making a game and can't find a good explanation about the difference about the two.

Answer 1

A sprite is a visual component. A character, enemy, collectable, or projectile are all examples of sprites; at least visually.

Tween is short for in between, and deals more with interpolation between two states. Tweens are composed of a timer, an interpolation function, and the start and end states. Some examples of tweens are: fading between colors, rotation between two angles, and motion between two points.

In short, a tween is a method of dynamically creating all of the steps between two states for the purpose of animation; It inherently has a temporal component. In contrast to a sprite, which is basically just an image.

We use a popular tween library in melonJS called Tween.js - Their examples should give a pretty good sense of what tweens are for: https://github.com/tweenjs/tween.js/#examples

---

melonJS provides both sprites and tweens as separate classes. me.Sprite and me.Tween. Sprite is one of the base classes for objects that draw an image to the screen; an example subclass is me.AnimationSheet Which simplifies the task of flipping between images to create a flipbook-style animation.

There are a few internal uses of tweens in melonJS, apart from being a public API; The scene transitions (fade to black and so on) are created with tweens.

And I made use of tweens in some of my melonJS games. The sliding doors in Sprung Fever are created with a tween. Here's the code for that: https://github.com/blipjoy/sprung_fever/blob/834b6ad27e45bf2a8fa80894ad12ddfa5b35aa2a/public/js/entities/door.js#L21-L29