[62010497] การสร้าง GUI ปุ่ม บน SFML
Nov 1 · 3 min read

ในการสร้างปุ่ม ผมจะเขียน code เป็นแบบ Classes/Objects โดยจะเขียน code ต่อจาก code พื้นฐานที่ทาง sfml ให้มานะครับ
#include <SFML/Graphics.hpp>int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "GUI Button"); while (window.isOpen())
{
sf::Event event; while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();
}
window.clear();
window.display();
}return 0;
}
โดยผมจะทำการสร้างไฟล์ class ดังรูปข้างล่าง

หลังจากกดตามเมนูจากรูปภาพด้านบน ก็จะขึ้นให้กรอกชื่อ class ดังรูปข้างล่าง

เมื่อทำการสร้าง class ก็จะได้ไฟล์มา 2 ไฟล์ คือ Button.cpp และ Button.h ดังนี้

มาเริ่มเขียน code กันเลยครับ
ไฟล์ Button.h
#pragma once#include <SFML/Graphics.hpp>enum button_states { BTN_IDLE = 0, BTN_HOVER, BTN_ACTIVE };class Button
{
private: short unsigned buttonState; //ใช้เก็บสถานะของปุ่ม idle,hover,active
sf::RectangleShape shape;
sf::Font* font; //font ของข้อความปุ่ม
sf::Text text; //ข้อความบนปุ่ม sf::Color textIdleColor; //สีข้อความสถานะ idle
sf::Color textHoverColor; //สีข้อความสถานะ hover
sf::Color textActiveColor; //สีข้อความสถานะ active sf::Color idleColor; //สีปุ่มสถานะ idle
sf::Color hoverColor; //สีปุ่มสถานะ hover
sf::Color activeColor; //สีปุ่มสถานะ active sf::Color outlineIdleColor; //สีขอบสถานะ idle
sf::Color outlineHoverColor; //สีขอบสถานะ hover
sf::Color outlineActiveColor;//สีขอบสถานะ activepublic: Button(float x, float y, float width, float height, sf::Font* font, std::string text, unsigned charractesr_size, sf::Color text_idle_color, sf::Color text_hover_color, sf::Color text_active_color, sf::Color idle_color, sf::Color hover_color, sf::Color active_color, sf::Color outline_idle_color = sf::Color::Transparent, sf::Color outline_hover_color = sf::Color::Transparent, sf::Color outline_active_color = sf::Color::Transparent); //ฟังก์ชัน
void update(const sf::Vector2i& mousePosWindow);
void render(sf::RenderTarget& target);};
ไฟล์ Button.cpp
#include "Button.h"Button::Button(float x, float y, float width, float height, sf::Font* font, std::string text, unsigned charractesr_size, sf::Color text_idle_color, sf::Color text_hover_color, sf::Color text_active_color, sf::Color idle_color, sf::Color hover_color, sf::Color active_color, sf::Color outline_idle_color, sf::Color outline_hover_color, sf::Color outline_active_color)
{
this->buttonState = BTN_IDLE; this->shape.setPosition(sf::Vector2f(x, y));
this->shape.setSize(sf::Vector2f(width, height));
this->shape.setFillColor(idle_color);
this->shape.setOutlineThickness(1.f);
this->shape.setOutlineColor(outline_idle_color); this->font = font;
this->text.setFont(*this->font);
this->text.setString(text);
this->text.setFillColor(text_idle_color);
this->text.setCharacterSize(charractesr_size);
this->text.setPosition(
this->shape.getPosition().x +
(this->shape.getGlobalBounds().width / 2.f) -
this->text.getGlobalBounds().width / 2.f,
this->shape.getPosition().y +
(this->shape.getGlobalBounds().height / 2.f) -
this->text.getGlobalBounds().height / 2.f
); //กำหนดสีข้อความ
this->textIdleColor = text_idle_color;
this->textHoverColor = text_hover_color;
this->textActiveColor = text_active_color; //กำหนดสีปุ่ม
this->idleColor = idle_color;
this->hoverColor = hover_color;
this->activeColor = active_color; //กำหนดสีขอบ
this->outlineIdleColor = outline_idle_color;
this->outlineHoverColor = outline_hover_color;
this->outlineActiveColor = outline_active_color;
}void Button::update(const sf::Vector2i& mousePosWindow)
{
//Idle
this->buttonState = BTN_IDLE; //Hover
if (this->shape.getGlobalBounds().contains(static_cast<sf::Vector2f>(mousePosWindow)))
{
this->buttonState = BTN_HOVER; // Pressed
if (sf::Mouse::isButtonPressed(sf::Mouse::Left))
{
this->buttonState = BTN_ACTIVE;
}
} switch (this->buttonState)
{
case BTN_IDLE:
this->shape.setFillColor(this->idleColor);
this->text.setFillColor(this->textIdleColor);
this->shape.setOutlineColor(this->outlineIdleColor);
break; case BTN_HOVER:
this->shape.setFillColor(this->hoverColor);
this->text.setFillColor(this->textHoverColor);
this->shape.setOutlineColor(this->outlineHoverColor);
break; case BTN_ACTIVE:
this->shape.setFillColor(this->activeColor);
this->text.setFillColor(this->textActiveColor);
this->shape.setOutlineColor(this->outlineActiveColor);
break; default:
this->shape.setFillColor(sf::Color::Red);
this->text.setFillColor(sf::Color::Blue);
this->shape.setOutlineColor(sf::Color::Green);
break;
}
}void Button::render(sf::RenderTarget& target)
{
target.draw(this->shape);
target.draw(this->text);
}
และไฟล์สุดท้าย ไฟล์ main.cpp
#include <SFML/Graphics.hpp>#include <string>
#include <map>#include "Button.h"int main()
{
sf::RenderWindow* window
(
new sf::RenderWindow(
sf::VideoMode(800, 600),
"GUI Button"
)
); sf::Vector2i mousePosWindow; std::map<std::string, Button*> buttons; sf::Font font; font.loadFromFile("Fonts/Pokemon Solid.ttf"); buttons["BTN_1"] = new Button(
10.f, 10.f, 200.f, 50.f,
&font, "GUI Button 1", 20,
sf::Color(70, 70, 70, 200),
sf::Color(40, 40, 40, 250),
sf::Color(20, 20, 20, 50),
sf::Color(255, 167, 28, 200),
sf::Color(255, 167, 28, 255),
sf::Color(255, 167, 28, 200)
); buttons["BTN_2"] = new Button(
10.f, 70.f, 200.f, 50.f,
&font, "GUI Button 2", 20,
sf::Color(70, 70, 70, 200),
sf::Color(40, 40, 40, 250),
sf::Color(20, 20, 20, 50),
sf::Color(255, 167, 28, 200),
sf::Color(255, 167, 28, 255),
sf::Color(255, 167, 28, 200)
); while (window->isOpen())
{
sf::Event event; while (window->pollEvent(event))
{
if (event.type == sf::Event::Closed)
window->close();
} window->clear(); mousePosWindow = sf::Mouse::getPosition(*window); buttons["BTN_1"]->update(mousePosWindow);
buttons["BTN_2"]->update(mousePosWindow);
buttons["BTN_1"]->render(*window);
buttons["BTN_2"]->render(*window); window->display();
} return 0;
}
แค่นี้ก็จะได้ปุ่มหน้าตาแบบนี้แล้วครับ

