Day 27 - 看起来很无聊又很好玩的游戏开发

Intro

这篇主要会讲解一些 SFML 中常用到的内容，效果，还有要怎麽用他们。

然後我会照影片中写的程序照做一遍。

Getting Started

EX1:

会让我们画出视窗，还有一个圆形的图案。

接下来

shape.move(2.5f, 0.f); // 这行就是让圆形可以往我们设定的方向移动。
window.draw(shape); // 这行可以让视窗画出我们的 shape(也就是圆形)

#include<SFML/Graphics.hpp>
using namespace sf;
int main()
{
    RenderWindow window(VideoMode(800, 600), "My window");// for size, "name"
    window.setFramerateLimit(60); // limit fps to prevent overloading on graphic card.

    CircleShape shape(50.f); // 呼叫一个 圆形 叫做 shape
 

        // run the program as long as the window is open
        while (window.isOpen()) // if not, it'll shut down as soon as you open it
        {
            // check all the window's events that were triggered since the last iteration of the loop
            Event event;
            while (window.pollEvent(event))
            {
                // "close requested" event: we close the window
                if (event.type == Event::Closed)
                    window.close();
            }

            // Update: for charcters [press w] -> [move forward]
            // you have to update the screen to see the position change.
            shape.move(5.f, 0.f); //让圆形可以动

            // Draw: draw new things on the 
            window.clear(Color::Red); // 每一次画的时候都需要把原本的清掉 

            window.draw(shape); // 要让萤幕可以画出来

            window.display();// 就是展示你前面做的更新 & draw
        }

    return 0;
}

那如果我们没有把 window.clear() 写上去的话，这时候那个圆形又在动，就会变成这样:

前面的图片没有删掉，後面又跑出来。

那如果你想要让背景换颜色，就可以用 window.clear(Color::Red); 你的背景就会变成红色!

EX2:

#include<SFML/Graphics.hpp>
using namespace sf;
int main()
{
    RenderWindow window(VideoMode(1080, 720), "My window");
    window.setFramerateLimit(60); 

    // Vector2f Vector2i SFML会把两个 float 或是 integer 宣告在一起 (一起使用)
    //Vector2f vec(10.f, 12.f);
    //vec.x; //会得到 x value
    //vec.y; //就会得到 y

    CircleShape circle(50.f); // 圆形
    circle.setPosition(Vector2f(0.f, 0.f));
    circle.setFillColor(Color(144, 156, 189));
    
    RectangleShape rect(Vector2f(400.f, 200.f)); // 矩形
    rect.setPosition(Vector2f(100.f, 100.f));
    rect.setFillColor(Color(255, 255, 200, 200));

    Vertex line[] =

    {
        Vertex(Vector2f(900.f, 500.f)), // 起点
        Vertex(Vector2f(1000.f, 500.f)) // 终点
    };

    //凸多边形:
    ConvexShape convex;
    convex.setPosition(Vector2f(400.f, 600.f));
    convex.setPointCount(5);
 
    //define the points
    convex.setPoint(0, Vector2f(0, 0));
    convex.setPoint(1, Vector2f(150, 10));
    convex.setPoint(2, Vector2f(120, 90));
    convex.setPoint(3, Vector2f(30, 100));
    convex.setPoint(4, Vector2f(0, 50));

    while (window.isOpen())
    {
        
        Event event;
        while (window.pollEvent(event))
        {
            
            if (event.type == Event::Closed)
                window.close();
        }

        // Update:

        // Draw:
        window.clear(); 
        //draw things
        window.draw(circle);
        window.draw(rect);
        window.draw(line, 2, Lines);
        window.draw(convex);
        //display
        window.display();
    }

    return 0;
}

这段教你怎麽印出图形，还有一些功能的介绍。

这些图形跑出来会长这样:

图形功能介绍:

要制造甚麽形状:

圆形: CircleShape
正多边形:
- CircleShape circle(半径(就是这个图形外切圆半径), 几边)
- 也可以用 .setRadius 设置半径；.setPointCount 设置边数
长方形: RectangleShape rec(Vectorsf(长, 宽))
线: RectangleShape line(Vectorsf(150.f, 5.f))
没粗度的线:

//制作
Vertex line[] = 

{
	Vertex(Vector2f(10.f, 10.f)), // 起点
	Vertex(Vector2f(150.f, 150.f)) // 终点
};

//画
window.draw(line, 2, Lines);

图形可以做甚麽事?

shapeName.setFillColor(Color(R, G, B)) →上色(整块)
shapeName.setOutlineThickness(10.f); →设定外框粗细，外框预设会在图形的最外侧
shapeName.setOutlineColor(R, G, B);→设定外框颜色。
shapeName.rotate(45.f) →按照 45.f 这个速度旋转(以图形的坐上角为轴)。
shapeName.setPosition(Vector2f(x, y)) → 放在(x, y)位置。
shapeName.setScale() → 缩放大小。

EX3:

#include<iostream>
#include<SFML\Graphics.hpp>
#include<SFML\Window.hpp>
#include<SFML\System.hpp>
using namespace sf;
// 做出一个小游戏，用 WSAD控制前後左右

void Update(int &keyTime, RenderWindow &window, RectangleShape &square);
void Draw(RenderWindow &window, RectangleShape& square);

int main() 
{	
	int keyTime = 8;

	RenderWindow window(VideoMode(640, 480), "Simple Square Swag", Style::Default);
	window.setFramerateLimit(120);

	RectangleShape square(Vector2f(100.f, 100.f));
	square.setFillColor(Color::Red);
	square.setPosition(window.getSize().x / 2, window.getSize().y / 2);

	while (window.isOpen())
	{	
		Event event;
		while (window.pollEvent(event))
		{
			if (event.type == Event::Closed)
				window.close();

			if (event.KeyPressed && event.key.code == Keyboard::Escape)
				window.close();
		}

		//Update
		Update(keyTime, window, square);
		//Draw
		Draw(window, square);

	}

}

void Update(int &keyTime, RenderWindow &window, RectangleShape& square) // 控制方块的前後左右
{
	if (keyTime < 8)
		keyTime++;

	if (Keyboard::isKeyPressed(Keyboard::A) && square.getPosition().x > 0) //  square.getPosition().x > 0 是设置边界
	{
		square.move(-5.f, 0.f);
		keyTime = 0;
	}
	if (Keyboard::isKeyPressed(Keyboard::D) && square.getPosition().x + square.getSize().x < window.getSize().x) //square.getPosition().x (方块的(0, 0)) + square.getSize().x (方块的长度) < window.getSize().x(视窗的长度)
	{	
		square.move(5.f, 0.f);
		keyTime = 0;
	}
	if (Keyboard::isKeyPressed(Keyboard::W) && square.getPosition().y > 0)
	{
		square.move(0.f, -5.f);
		keyTime = 0;
	}
	if (Keyboard::isKeyPressed(Keyboard::S) && square.getPosition().y + square.getSize().y < window.getSize().y) //
	{	
		square.move(0.f, 5.f);
		keyTime = 0;
	}
	if (Mouse::isButtonPressed(Mouse::Left)) // 左键按下去会变成蓝色
	{	
		square.setFillColor(Color::Blue);
		keyTime = 0;
	}
	else
	{
		square.setFillColor(Color::Red); //不按左键就是红色
	}
}

void Draw(RenderWindow &window, RectangleShape& square)
{	
	window.clear(Color::White); 

	//Draw stuff
	window.draw(square);
	window.display();
}

在这段程序，可以学到把一个方块印出来，如何用WSAD去控制这个方块，还有设置边界(就是到边边就不能动了)。

影片
(超出去是因为萤幕录影不知道为什麽会这样QQ)
大概长这样。