C++ में Animation (SFML)

Animation थोड़ी अलग pictures जल्दी-जल्दी दिखाना है ताकि चीज़ें move होती दिखें, एक flipbook की तरह। SFML में आप हर frame में एक shape की position थोड़ा बदलते हैं।

In this page:

एक Shape Move करना
Delta Time Use करना
Sprite Sheet Animation
Scale और Rotation Animation
Boundary Collision Animation

Syntax

cpp

sf::Clock clock;

while (window.isOpen()) {
  float dt = clock.restart().asSeconds();
  x += speed * dt;
  shape.setPosition(x, y);
}

एक Shape Move करना

Animation का सबसे simple form game loop के हर pass में एक shape के stored coordinates update करना है -- उदाहरण के लिए, हर frame इसकी X position थोड़ी सी increment करना -- और फिर फिर से draw() call करना, जिसे SFML shape की नई location पर render करता है।

उदाहरण: Moving a Shape

cpp

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::CircleShape shape(20.f);
	// Declare x and set it to 0.f
	float x = 0.f;
	// Loop: repeat while the condition holds
	for (int frame = 0; frame < 5; frame++) {
		x += 2.f;
		shape.setPosition(x, 100);
	}
	// Return 0 to signal that the program finished successfully
	return 0;
}

Delta Time Use करना

अगर आप हर frame एक object को fixed संख्या pixels से move करते हैं, यह एक ऐसी machine पर visibly तेज़ move करेगा जो एक slower वाली से ज़्यादा frames per second render करती है।

Movement amount को delta time (last frame से बीता real elapsed time) से multiply करना speed को normalize करता है ताकि animation frame rate चाहे जो भी हो same दिखे।

उदाहरण: Using Delta Time

cpp

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::Clock clock;
	// Declare x and set it to 0.f
	float x = 0.f;
	// Declare speed and set it to 100.f
	float speed = 100.f;
	float deltaTime = clock.restart().asSeconds();
	x += speed * deltaTime;
	// Return 0 to signal that the program finished successfully
	return 0;
}

Sprite Sheet Animation

एक sprite sheet dozens separate textures load करने से बचने के लिए कई animation frames को एक single image file में pack करती है। sf::IntRect उस sheet के एक rectangular sub-region को define करता है किसी दिए गए moment पर display करने के लिए, और समय के साथ rects की एक sequence से cycle करना animation produce करता है।

उदाहरण: Sprite Sheet Animation

cpp

#include <SFML/Graphics.hpp>

int main() {
	sf::Sprite sprite;
	sf::IntRect frame1(0, 0, 32, 32);
	sf::IntRect frame2(32, 0, 32, 32);
	sprite.setTextureRect(frame1);
	sprite.setTextureRect(frame2); // next animation frame
	return 0;
}

Scale और Rotation Animation

हर frame एक shape की position की बजाय इसकी rotation या scale value continuously update करना spinning या pulsing effects produce करता है।

क्योंकि ये separate transform properties हैं, आप एक ही object पर rotation, scale, और position animation simultaneously combine कर सकते हैं।

उदाहरण: Scale and Rotation Animation

cpp

#include <SFML/Graphics.hpp>

// Program execution starts in main()
int main() {
	sf::CircleShape shape(20.f);
	// Loop: repeat while the condition holds
	for (int frame = 0; frame < 5; frame++) {
		shape.rotate(5.f);
		shape.setScale(1.f + frame * 0.1f, 1.f + frame * 0.1f);
	}
	// Return 0 to signal that the program finished successfully
	return 0;
}

Boundary Collision Animation

एक object को bounce कराने के लिए, हर frame इसकी position window के edges के against check करें; जब यह एक boundary cross करे, इसकी velocity का relevant component invert करें (left/right walls के लिए X, top/bottom के लिए Y) ताकि यह off-screen जाने की बजाय edge से दूर move करता रहे।

उदाहरण: Boundary Collision Animation

cpp

#include <iostream>

int main() {
	float x = 95.f, velocityX = 3.f;
	float windowWidth = 100.f;
	if (x + velocityX > windowWidth || x + velocityX < 0)
		velocityX = -velocityX; // bounce off the edge
	std::cout << "New velocity: " << velocityX << std::endl;
	return 0;
}

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson C++ Drawing Shapes (SFML) Next Lesson → C++ Mouse & Keyboard Input