Explorar o código

Merge branch 'asset-handler' into 'master'

Asset Handler

See merge request pedrotrschneider/project-edu!2
Pedro Tonini Rosenberg Schneider %!s(int64=3) %!d(string=hai) anos
pai
achega
f3c6522b70

BIN=BIN
assets/audio/bonk.wav


BIN=BIN
assets/audio/thonk.wav


+ 19 - 17
index.html

@@ -11,40 +11,42 @@
     <!--******************************
       p5Js Modules
     *******************************-->
-    <!-- Core -->
-    <script src="libraries/p5.min.js"></script>
-    <script src="libraries/p5.sound.min.js"></script>
-    <script src="libraries/p5.dom.min.js"></script>
+    <script type="text/javascript" src="libraries/p5.min.js"></script>
+    <script type="text/javascript" src="libraries/p5.sound.min.js"></script>
+    <script type="text/javascript" src="libraries/p5.dom.min.js"></script>
 
     <!--******************************
       Pandora Engine
     *******************************-->
     <!-- Components -->
-    <script src="pandora/components/Ellipse.js"></script>
-    <script src="pandora/components/Rect.js"></script>
-    <script src="pandora/components/Vector2.js"></script>
+    <script type="text/javascript" src="pandora/components/Ellipse.js"></script>
+    <script type="text/javascript" src="pandora/components/Rect.js"></script>
+    <script type="text/javascript" src="pandora/components/Vector2.js"></script>
     
     <!-- Game Objects -->
-    <script src="pandora/game_objects/GameObject.js"></script>
+    <script type="text/javascript" src="pandora/game_objects/GameObject.js"></script>
     <!-- 2D Game Objects -->
-    <script src="pandora/game_objects/2d_objects/Object2D.js"></script>
-    <script src="pandora/game_objects/2d_objects/Shape2D.js"></script>
-    <script src="pandora/game_objects/2d_objects/Sprite2D.js"></script>
+    <script type="text/javascript" src="pandora/game_objects/2d_objects/Object2D.js"></script>
+    <script type="text/javascript" src="pandora/game_objects/2d_objects/Shape2D.js"></script>
+    <script type="text/javascript" src="pandora/game_objects/2d_objects/Sprite2D.js"></script>
     <!-- UI Game Objects -->
-    <script src="pandora/game_objects/ui_objects/UIObject.js"></script>
-    <script src="pandora/game_objects/ui_objects/Button.js"></script>
+    <script type="text/javascript" src="pandora/game_objects/ui_objects/UIObject.js"></script>
+    <script type="text/javascript" src="pandora/game_objects/ui_objects/Button.js"></script>
 
     <!-- Handlers -->
-    <script src="pandora/handlers/GameHandler.js"></script>
+    <script type="text/javascript" src="pandora/handlers/GameHandler.js"></script>
+    <script type="text/javascript" src="pandora/handlers/AssetHandler.js"></script>
 
     <!-- Resources -->
-    <script src="pandora/resources/Texture.js"></script>
+    <script type="text/javascript" src="pandora/resources/AudioRes.js"></script>
+    <script type="text/javascript" src="pandora/resources/FontRes.js"></script>
+    <script type="text/javascript" src="pandora/resources/TextureRes.js"></script>
     
     <!-- Singletons -->
-    <script src="pandora/Enums.js"></script>
+    <script type="text/javascript" src="pandora/Enums.js"></script>
   </head>
   
   <body>
-    <script src="src/sketch.js"></script>
+    <script type="text/javascript" src="src/sketch.js"></script>
   </body>
 </html>

+ 2 - 3
pandora/game_objects/2d_objects/Sprite2D.js

@@ -4,8 +4,7 @@ class Sprite2D extends Object2D
     {
         super(name);
 
-        if (p5Image)
-            this.texture = new Texture(p5Image, p5Image.width, p5Image.height);
+        this.P5Image = p5Image;
     }
 
     draw(delta)
@@ -15,7 +14,7 @@ class Sprite2D extends Object2D
         rotate(this.rotationDegrees);
         scale(this.scale.x, this.scale.y);
 
-        image(this.texture.image, this.position.x, this.position.y, this.texture.width, this.texture.height);
+        image(this.P5Image, this.position.x, this.position.y, this.P5Image.width, this.P5Image.height);
 
         this._draw(delta);
 

+ 103 - 0
pandora/handlers/AssetHandler.js

@@ -0,0 +1,103 @@
+const AssetHandler = {
+    cachedTextures: [],
+    cachedAudio: [],
+    cachedFonts: [],
+
+    loadTexture: function(name, link)
+    {
+        let textRes = new TextureRes(name, null);
+        this.cachedTextures.push(textRes);
+        loadImage(link, img =>
+        {
+            textRes.P5Image = img;
+        });
+    },
+
+    getTextureByName: function(name)
+    {
+        for (let i = 0; i < this.cachedTextures.length; i++)
+        {
+            if (this.cachedTextures[i].name == name)
+            {
+                return this.cachedTextures[i];
+            }
+        }
+        return null;
+    },
+
+    getP5ImageByName: function(name)
+    {
+        for (let i = 0; i < this.cachedTextures.length; i++)
+        {
+            if (this.cachedTextures[i].name == name)
+            {
+                return this.cachedTextures[i].P5Image;
+            }
+        }
+        return null;
+    },
+
+    loadAudio: function(name, link)
+    {
+        let audio = createAudio(link);
+        this.cachedAudio.push(new AudioRes(name, audio));
+    },
+
+    getAudioByName: function(name)
+    {
+        for (let i = 0; i < this.cachedAudio.length; i++)
+        {
+            if (this.cachedAudio[i].name == name)
+            {
+                return this.cachedAudio[i];
+            }
+        }
+        return null;
+    },
+
+    getP5AudioByName: function(name)
+    {
+        for (let i = 0; i < this.cachedAudio.length; i++)
+        {
+            if (this.cachedAudio[i].name == name)
+            {
+                return this.cachedAudio[i].P5Audio;
+            }
+        }
+        return null;
+    },
+
+    loadFont: function(name, link)
+    {
+        let fontRes = new FontRes(name, null);
+        this.cachedFonts.push(fontRes);
+        loadFont(link, font =>
+        {
+            fontRes.P5Font = font;
+        })
+    },
+
+    getFontByName: function(name)
+    {
+        for (let i = 0; i < this.cachedFonts.length; i++)
+        {
+            if (this.cachedFonts[i].name == name)
+            {
+                return this.cachedFonts[i];
+            }
+        }
+        return null;
+    },
+
+    getP5FontByName: function(name)
+    {
+        for (let i = 0; i < this.cachedFonts.length; i++)
+        {
+            if (this.cachedFonts[i].name == name)
+            {
+                return this.cachedFonts[i].P5Font;
+            }
+        }
+        return null;
+    }
+};

+ 23 - 21
pandora/handlers/GameHandler.js

@@ -1,21 +1,25 @@
-class GameHandler
-{
-    static rootObjects = []
-    static nextId = 0;
+const GameHandler = {
+    nextId: 0,
+    rootObjects: [],
 
-    static renderMode = null;
-    static setRenderMode(mode)
+    renderMode: null,
+
+    bDrawDebugFPS: false,
+
+    prevMillis: 0,
+    delta: 0,
+
+    setRenderMode: function(mode)
     {
         this.renderMode = mode;
-    }
+    },
 
-    static bDrawDebugFPS = false;
-    static drawDebugFPS(val)
+    drawDebugFPS(val)
     {
         this.bDrawDebugFPS = val;
-    }
+    },
 
-    static init(fps = 60)
+    init: function(fps = 60)
     {
         if (!this.renderMode) this.renderMode = RENDER_MODES.P2D;
         switch (this.renderMode)
@@ -30,29 +34,27 @@ class GameHandler
         }
         frameRate(fps);
         smooth();
-    }
+    },
 
-    static instanceGameObject(obj)
+    instanceGameObject: function(obj)
     {
         obj.id = this.nextId;
         this.nextId++;
-    }
+    },
 
-    static addRootObject(obj)
+    addRootObject: function(obj)
     {
         this.rootObjects.push(obj);
-    }
+    },
 
-    static prevMillis = 0;
-    static delta = 0;
-    static update()
+    update: function()
     {
         this.delta = (millis() - this.prevMillis) / 1000;
         for (let i = 0; i < this.rootObjects.length; i++)
             this.rootObjects[i].update(this.delta);
-    }
+    },
 
-    static draw()
+    draw: function()
     {
         if (this.renderMode == RENDER_MODES.WEBGL) translate(-windowWidth / 2, -windowHeight / 2);
         if (this.bDrawDebugFPS)

+ 8 - 0
pandora/resources/AudioRes.js

@@ -0,0 +1,8 @@
+class AudioRes
+{
+    constructor(name = "", p5Audio = null)
+    {
+        this.name = name;
+        this.P5Audio = p5Audio;
+    }
+}

+ 8 - 0
pandora/resources/FontRes.js

@@ -0,0 +1,8 @@
+class FontRes
+{
+    constructor(name = "", p5Font = null)
+    {
+        this.name = name;
+        this.P5Font = p5Font;
+    }
+}

+ 0 - 9
pandora/resources/Texture.js

@@ -1,9 +0,0 @@
-class Texture
-{
-    constructor(image = null, width = 0, height = 0)
-    {
-        this.image = image;
-        this.width = width;
-        this.height = height;
-    }
-}

+ 8 - 0
pandora/resources/TextureRes.js

@@ -0,0 +1,8 @@
+class TextureRes
+{
+    constructor(name = "", p5Image = null)
+    {
+        this.name = name;
+        this.P5Image = p5Image;
+    }
+}

+ 5 - 37
src/sketch.js

@@ -1,38 +1,10 @@
-class TestObject extends Button
-{
-    // constructor(name)
-    // {
-    //     super(name);
-    // }
-
-    _update(delta)
-    {
-
-    }
-
-    _draw(delta)
-    {
-
-    }
-
-    _onMousePressed() {
-        print("Hello")
-    }
-
-    _onMouseOver() {
-        print("over")
-    }
-}
-
 let test, test2;
-let testImg;
-let testFont;
-let testButton, testSlider;
 
 function preload()
 {
-    testImg = loadImage("/assets/textures/monke.png");
-    testFont = loadFont("/assets/fonts/Lato-Regular.ttf");
+    AssetHandler.loadTexture("monke", "/assets/textures/monke.png");
+    AssetHandler.loadFont("Lato", "/assets/fonts/Lato-Regular.ttf");
+    AssetHandler.loadAudio("bonk", "/assets/audio/thonk.wav");
 }
 
 function setup()
@@ -40,14 +12,10 @@ function setup()
     GameHandler.drawDebugFPS(true);
     GameHandler.setRenderMode(RENDER_MODES.WEBGL);
     GameHandler.init();
-    textFont(testFont);
+    textFont(AssetHandler.getP5FontByName("Lato"));
 
-    test = new TestObject("myTest");
+    test = new Sprite2D("mySprite", AssetHandler.getP5ImageByName("monke"));
     GameHandler.addRootObject(test);
-    test.setLabel("hello");
-
-    test2 = new TestObject("myTest2");
-    test.addChild(test2);
 }
 
 function draw()