[62010497] การสร้าง GUI ปุ่ม บน SFML

Nithi Nomprawat
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;//สีขอบสถานะ active
public: 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;
}

แค่นี้ก็จะได้ปุ่มหน้าตาแบบนี้แล้วครับ

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade