• ??🧛?♂?iecne個人主頁：點贊關注收藏評論支持哦~
• 💡每天關注iecne的作品，一起進步
• ?一起學習內容專欄：C++保姆級入門教程??C++每日一題??C++游戲設計教程
• 👉本文收錄專欄：C++游戲引擎教程與實戰
• 🐳希望大家多多支持🥰一起進步呀！

?

目錄

?前言

坐標系和節點坐標

1）精靈

?2）坐標和錨點

1. 0.5,0.5測試?

?2.獲取屏幕信息

3.居中顯示

使用Visual Studio打開圖片

1）文件夾的使用

2）在Visual Studio的使用

輸出精靈（圖片）代碼實例

關于命名

總結

---

?前言

哈嘍大家好，我是iecne，本期為大家帶來的是CPP/C++游戲引擎Easy2D教程 —— 精靈與坐標，包教包會，快來看看吧！

引擎支持 Visual Studio 2013 及以上版本，如果你使用的是較低版本的 VS，那么你需要考慮一下更新你的編譯器了

---

坐標系和節點坐標

1）精靈

Easy2D 使用左手坐標空間，坐標系原點在屏幕的左上角，x 軸向右為正，y 軸向下為正。

為了研究 Easy2D 的坐標系，我們將一張圖片復制到工程目錄下，并把它轉化為?精靈(Sprite)。

?使用下面的代碼設計游戲內容，將圖片的路徑和文件名傳入精靈的構造函數中，可以看到屏幕上顯示了這張圖片

// 創建一個場景 auto scene = gcnew Scene; // 創建一個精靈 auto sprite = gcnew Sprite(L"圖片名.png"); // 把精靈添加到場景中 scene->addChild(sprite);

場景實例

?

---

?2）坐標和錨點

節點的Position?(坐標) 代表了它在屏幕上顯示的位置，節點的坐標由 x 和 y 兩個值組成，x 坐標值越大，它在屏幕上的位置越靠右，y 坐標值越大，它在屏幕上的位置越靠下。節點的默認坐標為 (0, 0)，也就是屏幕左上角。

節點的Anchor(錨點) 是一個重要屬性，它相當于節點的 “把手”。有了中心點，你就可以 “抓著” 它移動這個節點，或者旋轉它。

Node::setAnchor?函數用于設置節點的中心點，它需要兩個 float 類型的參數，兩個參數的取值范圍都是 [0, 1]，代表了中心點的位置。中心點一定在節點的內部，中心點設置為（0, 0）代表節點的中心點在它的左上角，（1, 1）代表中心點在它的右下角，（0.5, 1）代表中心點在它的底部的中心位置。

例如，下圖是一個精靈在中心點分別為 ( 0.5, 0.5 ) 和 (0, 0) 時進行旋轉得到的結果：

?

1. 0.5,0.5測試?

我們把剛才創建的精靈中心點設為 ( 0.5, 0.5 ) 進行測試

sprite->setAnchor(0.5f, 0.5f);

運行結果如下圖所示，可以看到精靈的一部分被遮住了。這是因為精靈的默認坐標為(0, 0)，也就是屏幕左上角，而精靈的中心點位置是圖片的正中心，所以顯示出的結果為 “精靈正中心的位置在屏幕左上角” 。

修改了中心點后的精靈

?2.獲取屏幕信息

現在我們想完整地看到精靈，可以把精靈向右下方移動寬度和高度的一半，這樣整個精靈就顯示在屏幕中了。

Node::getWidth和Node::getHeight函數可以獲取節點的寬度和高度，如下所示

// 獲取精靈的寬度 float width = sprite->getWidth(); // 獲取精靈高度 float height = sprite->getHeight();

Node::setPos?函數用來直接設置節點在屏幕上的位置，它需要兩個 float 類型的參數，分別表示節點的 x 坐標和 y 坐標。

// 移動精靈的位置 sprite->setPos(width / 2, height / 2);

3.居中顯示

?節點的中心點為它的正中心時，如果把它的 x 坐標設置為屏幕寬度的一半，y 坐標設置為屏幕高度的一半，那么它將顯示在屏幕正中央。

// 獲取窗口寬度 float width = Window::getWidth(); // 獲取窗口高度 float height = Window::getHeight(); // 移動精靈到屏幕中央 sprite->setPos(width / 2, height / 2);

運行后的效果如下圖：

---

使用Visual Studio打開圖片

剛剛呢，我們主要講解了如何去系統的使用，以及實際的位置，而接下來我們可以用Visual Studio來簡單的P圖

1）文件夾的使用

以VS2019為例子，我們點擊創建新項目

?然后選擇控制臺應用，并且填寫信息

?

?等待生成了新項目我們再看看，位置（L）中的文件夾

?

?打開文件夾，在文件夾里邊放上自己的圖片

?比如作者加入了一張圖片

?并且命名為ooo

切記：圖片名字一定要簡單，圖片多的時候要有規律，這樣方便

---

2）在Visual Studio的使用

?

點擊這個圖標，選擇圖片，便可以打開文件夾里的圖片進行修改了

如下：

?這樣就可以打開了

---

輸出精靈（圖片）代碼實例

#include <iostream> #include <easy2d/easy2d.h>using namespace std; using namespace easy2d;int main() {if (Game::init()){/* 設計游戲內容 */// 創建一個空場景,記得不是new，用gc釋放內存auto scene = gcnew Scene; // 進入 scene 場景SceneManager::enter(scene);// 創建一個精靈auto sprite = gcnew Sprite(L"ooo");// 把精靈添加到場景中scene->addChild(sprite);//開始！Game::start();}Game::destroy();return 0; }

首先看一段代碼，規規矩矩有頭有尾，創建了一個精靈，并且添加到了場景中

但是效果如下：

?Warning: Load Image from file failed

意思是

警告:從文件加載圖像失敗

那么如何修改呢？

#include <iostream> #include <easy2d/easy2d.h>using namespace std; using namespace easy2d;int main() {if (Game::init()){/* 設計游戲內容 */// 創建一個空場景,記得不是new，用gc釋放內存auto scene = gcnew Scene; // 進入 scene 場景SceneManager::enter(scene);// 創建一個精靈auto sprite = gcnew Sprite(L"ooo.jpg");// 把精靈添加到場景中scene->addChild(sprite);//開始！Game::start();}Game::destroy();return 0; }

加上圖片后綴，記住一定要看文件夾里的圖片是怎么樣的就怎么寫上去

還是那句話

切記：圖片名字一定要簡單，圖片多的時候要有規律，這樣方便

看結果：

?

---

關于命名

Easy2D 按照以下規律命名函數：

• 小駝峰式命名法則，第一個單詞小寫，后面的單詞首字母大寫，如Window::setTitle
• 所有函數均按照動詞+名語形式命名，如Logger::showConsole
• 獲取對象的屬性值：get+屬性名，如Node::getWidth
• 修改對象的屬性值：set+屬性名，如Node::setPos
• 獲取對象的狀態(bool值)：is+狀態名，如Node::isVisiable

---

總結

?本節課主要是講解了Easy2D引擎實現的教程，至此該課示例的思想博主已經真真切切徹徹底底分享完了，相信大家對這個邏輯有了一定的理解，大家可以自己動手敲敲代碼，感受一下，包教包會。

帥的人已然點贊收藏關注，而丑的人還在猶豫，被猶豫了，快三連吧！

?

原創不易，還希望各位大佬支持一下

?

點贊，你的認可是我創作的動力！

?

收藏，你的青睞是我努力的方向！

?

評論，你的意見是我進步的財富！

?

---

??感謝每一個觀看本篇文章的朋友，更多精彩敬請期待：iecne的博客_CSDN博客-C++保姆級入門教程領域博主

文章存在借鑒，如有侵權請聯系修改刪除！

?

?

?

總結

以上是生活随笔為你收集整理的【游戏引擎Easy2D】学C++还在面对黑框框？那是你没看这篇文，游戏引擎教会你的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。