Merge pull request #12 from mortennobel/develop

Update UI example

Author: mortennobel

project/gui/CameraComponent.cpp

@@ -0,0 +1,80 @@
+//
+// Created by Morten Nobel Jørgensen on 2018-11-04.
+//
+
+#include <SDL_events.h>
+#include "CameraComponent.hpp"
+#include "GameObject.hpp"
+#include "sre/Renderer.hpp"
+
+CameraComponent::CameraComponent(GameObject *gameObject) : Component(gameObject) {
+
+}
+
+void CameraComponent::update(float deltaTime) {
+    using namespace glm;
+
+    // find min and max dist in world space
+    auto inst = sre::Renderer::instance;
+    auto minWorldPos = clipToWorldspaceCoordinates({-safeArea, -safeArea, 0});
+    auto centerWorldPos = clipToWorldspaceCoordinates({0, 0, 0});
+    auto maxWorldPos = clipToWorldspaceCoordinates({+safeArea, +safeArea, 0});
+
+    vec3 pos ( target->getPosition(),0);
+    vec3 newPos = glm::min(maxWorldPos, glm::max(minWorldPos, pos));
+    if (pos != newPos){
+        auto diff = newPos-pos;
+        centerWorldPos -= diff;
+        this->camera->lookAt(centerWorldPos, centerWorldPos + vec3(0,0,-1), vec3(0,1,0));
+    }
+}
+
+void CameraComponent::onGui() {
+
+}
+
+void CameraComponent::setTarget(std::shared_ptr<GameObject>& target) {
+    this->target = target;
+}
+
+void CameraComponent::setSize(float size) {
+    this->size = size;
+    camera->setOrthographicProjection(size, -1, 1);
+}
+
+void CameraComponent::setCamera(sre::Camera *camera) {
+    this->camera = camera;
+}
+
+glm::vec2 CameraComponent::getWindowCoordinates(glm::vec3 worldpos){
+    using namespace glm;
+    vec4 w(worldpos, 1.0f);
+    auto inst = sre::Renderer::instance;
+    auto viewport = static_cast<glm::vec2>(inst->getDrawableSize());
+    vec4 clipSpace = camera->getProjectionTransform(viewport) * camera->getViewTransform()*w;
+    vec4 ndc = clipSpace/clipSpace.w;
+    ndc.y *= -1;
+    vec4 winCoords = ndc * 0.5f + 0.5f;
+    return vec2(winCoords) * vec2(inst->getWindowSize());
+}
+
+bool CameraComponent::onKey(SDL_Event &event) {
+    if (event.type==SDL_KEYDOWN){
+        switch(event.key.keysym.sym){
+            case SDLK_1:
+                setSize(size+1);
+                break;
+            case SDLK_2:
+                setSize(size-1);
+                break;
+        }
+    }
+}
+
+glm::vec3 CameraComponent::clipToWorldspaceCoordinates(glm::vec3 clipCoordinates) {
+    using namespace glm;
+    auto inst = sre::Renderer::instance;
+    auto viewport = static_cast<glm::vec2>(inst->getDrawableSize());
+    glm::vec4 worldSpace = glm::inverse(camera->getViewTransform())*glm::inverse(camera->getProjectionTransform(viewport)) * vec4(clipCoordinates, 1.0);
+    return glm::vec3(worldSpace);
+}

project/gui/CameraComponent.hpp

@@ -0,0 +1,34 @@
+//
+// Created by Morten Nobel Jørgensen on 2018-11-04.
+//
+#pragma once
+
+#include "Component.hpp"
+#include "sre/Camera.hpp"
+
+// Create a game camera
+class CameraComponent : public Component{
+public:
+    explicit CameraComponent(GameObject *gameObject);
+
+    void update(float deltaTime) override;
+
+    void onGui() override;
+
+    void setCamera(sre::Camera* camera);
+
+    void setSize(float size);
+
+    bool onKey(SDL_Event &event) override;
+
+    void setTarget(std::shared_ptr<GameObject>& target);
+
+    glm::vec2 getWindowCoordinates(glm::vec3 worldpos);
+    glm::vec3 clipToWorldspaceCoordinates(glm::vec3 clipCoordinates);
+private:
+    sre::Camera* camera;
+    float size = 400;
+    std::shared_ptr<GameObject> target;
+    float safeArea = 0.3f; // percentage from center
+};
+

project/gui/Hero.cpp

@@ -14,6 +14,10 @@ using namespace sre;
 
 std::map<std::string, std::shared_ptr<sre::Texture>> Hero::inventoryTexture;
 
+const int heartEmpty = 0;
+const int heartHalf = 1;
+const int heartFull = 2;
+
 Hero::Hero(GameObject *gameObject)
 : Component(gameObject), velocity(0) {
     auto heroTexture = sre::Texture::create()
@@ -30,14 +34,20 @@ Hero::Hero(GameObject *gameObject)
             "Necklace",
             "Shield"};
 
+    heartIcons[heartEmpty] = Texture::create().withFile("assets/hud_heartEmpty.png").withFilterSampling(false).build();
+    heartIcons[heartHalf] = Texture::create().withFile("assets/hud_heartHalf.png").withFilterSampling(false).build();
+    heartIcons[heartFull] = Texture::create().withFile("assets/hud_heartFull.png").withFilterSampling(false).build();
+    heartSize = {heartIcons[heartFull]->getWidth()*0.5f, heartIcons[heartFull]->getHeight()*0.5f};
+    powerbar = Texture::create().withFile("assets/powerbar.png").withFilterSampling(false).build();
+    powerbarSize = {heartSize.x*3,heartSize.y};
+
     heroSpriteAtlas = SpriteAtlas::createSingleSprite(heroTexture, "hero");
 
     auto spriteComponent = gameObject->addComponent<SpriteComponent>();
     auto sprite = heroSpriteAtlas->get("hero");
     heroSize = sprite.getSpriteSize();
     spriteComponent->setSprite(sprite);
 
-    gameObject->setPosition({305,200});
 
     // setup font
     auto fonts = ImGui::GetIO().Fonts;
@@ -94,9 +104,10 @@ void Hero::guiSpeechBubble(){
     bool* open = nullptr;
 
     auto heroPos = gameObject->getPosition();
+    auto heroPosWin = cam->getWindowCoordinates(glm::vec3(heroPos, 0.0));
     ImVec2 popupSize(300, 50);
 
-    ImVec2 pos (heroPos.x - popupSize.x / 2, (winsize.y - heroPos.y) - popupSize.y - heroSize.y );
+    ImVec2 pos (heroPosWin.x - popupSize.x / 2, heroPosWin.y - popupSize.y - heroSize.y );
     auto cond = ImGuiCond_Always;
     ImGui::SetNextWindowPos(pos, cond);
     ImGui::SetNextWindowSize(popupSize, cond);
@@ -111,7 +122,7 @@ void Hero::guiSpeechBubble(){
 void Hero::guiGameInfo() {
     auto r = Renderer::instance;
     auto winsize = r->getWindowSize();
-    ImVec2 size = {220,60};
+    ImVec2 size = {180, 107};
     ImVec2 pos = {winsize.x - size.x,0};
     auto cond = ImGuiCond_Always;
     ImVec2 pivot = {0,0};
@@ -127,32 +138,60 @@ void Hero::guiGameInfo() {
     ImGui::Begin("#gameinfo", open, flags);
     ImGui::PushFont(ProggyTiny);
 
-    // draw score
-    ImGui::Text("Score"); ImGui::SameLine();
+    // draw health
+    ImGui::Text("Health");
+    float width = heartSize.x*3;
+    float windowWidth = 
ImGui::GetWindowContentRegionWidth();
+    ImVec2 uv0(0,1); // flip y axis coordinates
+    ImVec2 uv1(1,0);
+    for (int i=0;i<3;i++){
+
+        ImGui::SameLine(windowWidth - width + heartSize.x * i);
+        int texIndex = heartFull;
+        if (i*2+1 == health){
+            texIndex = heartHalf;
+        } else if (i*2 > health){
+            texIndex = heartEmpty;
+        }
+        Texture* tex = heartIcons[texIndex].get();
+        ImGui::Image(tex->getNativeTexturePtr(),{heartSize.x,heartSize.y}, uv0, uv1);
+    }
+
+    // draw Score
+    ImGui::PushID(1);
     auto scoreStr = std::to_string(score);
-    float windowWidth = 
  ImGui::GetWindowContentRegionWidth();
-    float width = ImGui::CalcTextSize(scoreStr.c_str()).x;
+    ImGui::Text("Score"); ImGui::SameLine();
+    width = ImGui::CalcTextSize(scoreStr.c_str()).x;
     ImGui::SetCursorPosX(windowWidth - width); // align right
     ImGui::Text(scoreStr.c_str());
+    ImGui::PopID();
 
-    // draw health
-    ImGui::PushID(1);
-    auto healthStr = std::to_string(health);
-    ImGui::Text("Health"); ImGui::SameLine();
-    width = ImGui::CalcTextSize(healthStr.c_str()).x;
+    // Draw powerbar
+    ImGui::Text("Power"); ImGui::SameLine();
+    width = powerbarSize.x;
     ImGui::SetCursorPosX(windowWidth - width); // align right
-    ImGui::Text(healthStr.c_str());
-    ImGui::PopID();
+    // Draw background
+    ImGui::Image(powerbar->getNativeTexturePtr(),{powerbarSize.x,powerbarSize.y}, uv0, uv1); ImGui::SameLine();
+    float border=3;
+    auto innerSize = powerbarSize - glm::vec2(border*2,border*2);
+    ImGui::SetCursorPosX(windowWidth - width + border); // align right
+    ImGui::SetCursorPosY(ImGui::GetCursorPosY() + border); // move down
+    // scale/clip inner bar
+    innerSize.x *= power;
+    uv1.x *= power;
+    ImVec4 tintColor(0,1,0,1);
+    ImGui::Image(powerbar->getNativeTexturePtr(),{innerSize.x,innerSize.y}, uv0, uv1, tintColor);
     ImGui::PopFont();
     ImGui::End();
+
 }
 
 void Hero::guiInventory() {
     ImVec2 pos = {0,0};
     auto cond = ImGuiCond_Always;
     ImVec2 pivot = {0,0};
     ImGui::SetNextWindowPos(pos, cond, pivot);
-    ImVec2 size = {165, 107};
+    ImVec2 size = {180, 107};
     ImGui::SetNextWindowSize(size, cond);
     auto flags =
             ImGuiWindowFlags_NoTitleBar |
@@ -185,7 +224,7 @@ void Hero::guiInventory() {
             ImGui::EndTooltip();
         }
 
-        if (count == 0 || count %4 != 0)
+        if (count == 0 || count %3 != 0)
             ImGui::SameLine();
         count ++;
     }
@@ -201,3 +240,7 @@ void Hero::onGui() {
     guiGameInfo();
     guiInventory();
 }
+
+void Hero::setCamera(std::shared_ptr<CameraComponent> cam) {
+    this->cam = cam;
+}

project/gui/Hero.hpp

@@ -5,6 +5,7 @@
 #pragma once
 
 #include "Component.hpp"
+#include "CameraComponent.hpp"
 
 class Hero : public Component {
 public:
@@ -14,11 +15,16 @@ class Hero : public Component {
 
     bool onKey(SDL_Event &event) override;
     void update(float deltaTime) override;
+    void setCamera(std::shared_ptr<CameraComponent> cam);
 private:
     void guiGameInfo();
     void guiSpeechBubble();
     void guiInventory();
 
+    std::shared_ptr<sre::Texture> powerbar;
+    glm::vec2 powerbarSize;
+    std::shared_ptr<sre::Texture> heartIcons[3];
+    glm::vec2 heartSize;
     std::shared_ptr<sre::SpriteAtlas> heroSpriteAtlas;
     static std::map<std::string, std::shared_ptr<sre::Texture>> inventoryTexture;
     glm::vec2 velocity;
@@ -27,10 +33,13 @@ class Hero : public Component {
     float speachBubbleTimeOut = 10;
     std::string message = "Hi! AWSD to control.";
 
+    std::shared_ptr<CameraComponent> cam;
+
     glm::ivec2 heroSize;
 
     // hero stats
-    int health = 10;
-    int score = 3;
+    int health = 3; // between 0 and 6
+    int score = 42;
+    float power = 0.7; // between 0.0 and 1.0
     std::set<std::string> inventorySet;
 };

project/gui/MainMenuComponent.cpp

@@ -38,7 +38,7 @@ void MainMenuComponent::onGui() {
     auto winsize = r->getWindowSize();
     ImVec2 iWinSize(224,150);
 
-    ImVec2 pos ((winsize.x - iWinSize.x)/2, winsize.y/2);
+    ImVec2 pos ((winsize.x - iWinSize.x)/2.0f, winsize.y/2.0f);
     auto cond = ImGuiCond_Always;
     ImGui::SetNextWindowPos(pos, cond);
     ImGui::SetNextWindowSize(iWinSize, cond);

project/gui/RPG.cpp

@@ -7,17 +7,21 @@
 #include "Hero.hpp"
 #include "MainMenuComponent.h"
 #include "SpriteComponent.hpp"
+#include "CameraComponent.hpp"
 #include "sre/SpriteAtlas.hpp"
 #define GLM_ENABLE_EXPERIMENTAL
 #include "glm/gtx/string_cast.hpp"
 
 using namespace sre;
 
+const glm::vec2 heroStartingPos(305,200);
+
 RPG::RPG()
 :currentScene(&mainMenu)
 {
-    r.setWindowSize({600,400});
+    r.setWindowSize({600,450});
     r.init()
+     .withSdlWindowFlags(SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE)
      .build();
 
     ImGuiIO& io = ImGui::GetIO();
@@ -29,7 +33,6 @@ RPG::RPG()
 
     auto world = sre::Texture::create()
             .withFile("assets/Arkanos_0.png")
-            .withFilterSampling(false)
             .build();
     this->world = SpriteAtlas::createSingleSprite(world,"world", {0,0});
 
@@ -67,7 +70,8 @@ void RPG::buildMainMenu(){
     auto spriteComp = gameObject->addComponent<SpriteComponent>();
     spriteComp->setSprite(sprite);
 
-    mainMenu.getCamera().setWindowCoordinates();
+    mainMenu.getCamera().setOrthographicProjection(200, -1, 1);
+    mainMenu.getCamera().lookAt({heroStartingPos,0},{heroStartingPos,-1},{0,1,0});
 }
 
 void RPG::buildGame(){
@@ -78,10 +82,18 @@ void RPG::buildGame(){
     auto spriteComp = gameObject->addComponent<SpriteComponent>();
     spriteComp->setSprite(sprite);
 
-    game.getCamera().setWindowCoordinates();
-
     auto heroGameObject = game.createGameObject();
-    heroGameObject->addComponent<Hero>();
+
+    auto camereObj = game.createGameObject();
+    auto cameraComp = camereObj->addComponent<CameraComponent>();
+    cameraComp->setCamera(&game.getCamera());
+    game.getCamera().lookAt({heroStartingPos,0},{heroStartingPos,-1},{0,1,0});
+    cameraComp->setSize(200);
+    cameraComp->setTarget(heroGameObject);
+
+    auto h = heroGameObject->addComponent<Hero>();
+    heroGameObject->setPosition({heroStartingPos});
+    h->setCamera(cameraComp);
 }
 
 void RPG::play(){

project/gui/assets/hud_heartEmpty.png

@@ -12,4 +12,8 @@ https://proggyfonts.net/proggy-tiny/
 
 496 pixel art icons for medieval/fantasy RPG
 CC0
-https://opengameart.org/content/496-pixel-art-icons-for-medievalfantasy-rpg
+https://opengameart.org/content/496-pixel-art-icons-for-medievalfantasy-rpg
+
+Platformer Art Deluxe
+CC0
+https://opengameart.org/content/platformer-art-deluxe