浏览代码

✨ Add tutorial animation

Pedro Schneider 3 年之前
父节点
当前提交
ed302c3e70

+ 2 - 0
index.html

@@ -26,6 +26,8 @@
     <script type="text/javascript" src="src/elements/earth/rebus/game/RebusOptionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/rebus/game/RebusQuestionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/rebus/game/RebusGame.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/tutorial/RebusTutorialVisualEffects.js"></script>
+    <script type="text/javascript" src="src/elements/earth/rebus/tutorial/RebusTutorial.js"></script>
   </head>
   
   <body>

+ 5 - 4
src/elements/earth/rebus/game/RebusCardVisualEffect.js

@@ -21,6 +21,7 @@
 
 class RebusCardVisualEffect extends Object2D
 {
+    glowIterations = 7;
     glowAmount = 0;
 
     _draw(delta, db)
@@ -36,11 +37,11 @@ class RebusCardVisualEffect extends Object2D
             else
             {
                 db.noFill();
-                this.glowAmount = min(1.0, this.glowAmount + 0.07);
-                for (let i = 0; i < 100; i++)
+                this.glowAmount = min(1.0, this.glowAmount + 0.03);
+                for (let i = 0; i < this.glowIterations; i++)
                 {
-                    db.stroke(255, 255, 100, this.glowAmount * 200 / (101 - i));
-                    db.strokeWeight((100 - i) / 3);
+                    db.stroke(255, 255, 100, this.glowAmount * 200 / (this.glowIterations + 1 - i));
+                    db.strokeWeight((this.glowIterations - i) * 6);
                     db.rect(0, 0, 300, 400, 10);
                 }
             }

+ 0 - 5
src/elements/earth/rebus/level_selector/RebusLevelButton.js

@@ -28,11 +28,6 @@ class RebusLevelButton extends Button
         this.addSignal("levelSelected");
     }
 
-    _setup()
-    {
-
-    }
-
     _onMouseClicked()
     {
         this.emitSignal("levelSelected", this.levelData);

+ 9 - 1
src/elements/earth/rebus/level_selector/RebusLevelSelector.js

@@ -39,7 +39,7 @@ class RebusLevelSelector extends Object2D
         this.addChild(b);
         b.setSize(200, 100);
         b.setPosition((1920 - b.getSize().x) / 2, 300);
-        b.connect("levelSelected", this, "_onLevelSelected");
+        b.connect("levelSelected", this, "_onTutorialSelected");
 
         var i = 1;
         while (REBUS_LEVELS[`level${i}`])
@@ -76,6 +76,14 @@ class RebusLevelSelector extends Object2D
         db.text("Escolha o nível", 1920 / 2, 200);
     }
 
+    _onTutorialSelected(levelData)
+    {
+        var rg = new RebusTutorial("RebusTutorial");
+        rg.levelData = levelData;
+        GameHandler.addRootObject(rg);
+        this.queueFree();
+    }
+
     _onLevelSelected(levelData)
     {
         var rg = new RebusGame("RebusGame");

+ 182 - 0
src/elements/earth/rebus/tutorial/RebusTutorial.js

@@ -0,0 +1,182 @@
+/************************************************************************
+ * RebusTutorial.js
+ ************************************************************************
+ * Copyright (c) 2021 Pedro Tonini Rosenberg Schneider.
+ *
+ * This file is part of Alfabetiza.
+ *
+ * Alfabetiza is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Alfabetiza is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *     
+ * You should have received a copy of the GNU General Public License     
+ * along with Alfabetiza.  If not, see <https://www.gnu.org/licenses/>.
+ *************************************************************************/
+
+class RebusTutorial extends Object2D
+{
+    levelData = null;
+    gameFinished = false;
+    points = 3;
+
+    backButton = null;
+    continueButton = null;
+    timer = null;
+
+    tutorialStep = 0;
+    questionCards = [];
+    optionCards = [];
+    answerIdx = 0;
+
+    _setup()
+    {
+        var arr = [];
+        for (let i = 0; i < this.levelData.optionCards.length; i++)
+            arr.push(i);
+        arr = shuffle(arr);
+
+        for (let i = 0; i < this.levelData.optionCards.length; i++)
+        {
+            var j = arr[i];
+            var newCard = new RebusOptionCard("OptionCard" + j);
+            AssetHandler.loadTexture(this.levelData.optionCards[j].name, this.levelData.optionCards[j].path);
+            newCard.selectable = false;
+            newCard.thumb = AssetHandler.getTextureByName(this.levelData.optionCards[j].name);
+            newCard.imgName = this.levelData.optionCards[j].name;
+            newCard.isAnswer = this.levelData.optionCards[j].answer;
+            if (newCard.isAnswer) this.answerIdx = i;
+            newCard.setPosition((i + 1) * (1920 / 4), 3 * (1080 / 4));
+            this.addChild(newCard);
+            this.optionCards.push(newCard);
+            newCard.hide();
+        }
+
+        for (let i = 0; i < this.levelData.questionCards.length; i++)
+        {
+            var newCard = new RebusQuestionCard("OptionCard" + i);
+            AssetHandler.loadTexture(this.levelData.questionCards[i].name, this.levelData.questionCards[i].path);
+            newCard.thumb = AssetHandler.getTextureByName(this.levelData.questionCards[i].name);
+            newCard.imgName = this.levelData.questionCards[i].name;
+            newCard.setPosition((i + 1) * (1920 / (this.levelData.questionCards.length + 1)), 1080 / 4);
+            this.addChild(newCard);
+            this.questionCards.push(newCard);
+            newCard.hide();
+        }
+
+        this.backButton = new Button("BackButton");
+        this.backButton.setLabel("Voltar");
+        this.backButton.setFontSize(30);
+        this.backButton.setPosition(20, 20);
+        this.backButton.setSize(110, 75);
+        this.backButton.connect("mouseClicked", this, "_onBackClicked");
+        this.addChild(this.backButton);
+
+        this.continueButton = new Button("ContinueButton");
+        this.continueButton.setLabel("Continuar");
+        this.continueButton.setFontSize(40);
+        this.continueButton.setPosition((1920 - this.continueButton.getSize().x) / 2, 1080 - 450);
+        this.continueButton.hide();
+        this.continueButton.connect("mouseClicked", this, "_onContinueClicked");
+        this.addChild(this.continueButton);
+
+        this.timer = new Timer("Timer", 2, true, true);
+        this.timer.connect("timeout", this, "_onTimerTimeout");
+        this.addChild(this.timer);
+
+        this.addChild(new RebusTutorialVisualEffects);
+    }
+
+    _update(delta)
+    {
+        switch (this.tutorialStep)
+        {
+            case 2:
+                for (let i = 0; i < this.questionCards.length; i++)
+                    this.questionCards[i].show();
+                this.timer.start(1);
+                break;
+            case 5:
+                for (let i = 0; i < this.optionCards.length; i++)
+                    this.optionCards[i].show();
+                this.timer.start(1);
+            case 6:
+                this.timer.start(2);
+                break;
+        }
+    }
+
+    _draw(delta, db)
+    {
+        background(52);
+    }
+
+    returnToMenu()
+    {
+        AssetHandler.clearTextureCache();
+        GameHandler.addRootObject(new RebusLevelSelector("LevelSelector"));
+        this.queueFree();
+    }
+
+    _onBackClicked()
+    {
+        this.returnToMenu();
+    }
+
+    _onContinueClicked()
+    {
+        this.continueButton.hide();
+        this.tutorialStep++;
+        
+        switch (this.tutorialStep)
+        {
+            case 4:
+                this.timer.start(2);
+                break;
+            case 8:
+                this.returnToMenu();
+                break;
+        }
+    }
+
+    _onTimerTimeout()
+    {
+        switch (this.tutorialStep)
+        {
+            case 0:
+                this.continueButton.show();
+                this.timer.start(3);
+                break;
+            case 1:
+                this.tutorialStep++;
+                break;
+            case 2:
+                this.tutorialStep++;
+                this.timer.start(2);
+                break;
+            case 3:
+                this.continueButton.show();
+                break;
+            case 4:
+                this.tutorialStep++;
+                break;
+            case 5:
+                for (let i = 0; i < this.optionCards.length; i++)
+                    this.optionCards[i].selected = true;
+                this.tutorialStep++;
+                break;
+            case 6:
+                this.tutorialStep++;
+                this.timer.start(2);
+                break;
+            case 7:
+                this.continueButton.show();
+                break;
+        }
+    }
+}

+ 76 - 0
src/elements/earth/rebus/tutorial/RebusTutorialVisualEffects.js

@@ -0,0 +1,76 @@
+/************************************************************************
+ * RebusTutorialVisualEffects.js
+ ************************************************************************
+ * Copyright (c) 2021 Pedro Tonini Rosenberg Schneider.
+ *
+ * This file is part of Alfabetiza.
+ *
+ * Alfabetiza is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Alfabetiza is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *     
+ * You should have received a copy of the GNU General Public License     
+ * along with Alfabetiza.  If not, see <https://www.gnu.org/licenses/>.
+ *************************************************************************/
+
+class RebusTutorialVisualEffects extends Object2D
+{
+    text = "";
+    bgOpacity = 0;
+    textOpacity = 0;
+
+    _draw(delta, db)
+    {
+        switch (this.parent.tutorialStep)
+        {
+            case 0:
+                this.bgOpacity = min(this.bgOpacity + 150 * delta, 200);
+                this.textOpacity = min(this.bgOpacity + 150 * delta, 255);
+                this.text = `Vamos ler rébus?\nRébus é uma palavra formada quando juntamos os primeiros\npedacinhos de outras palavras.\nVeja!`;
+                break;
+            case 1:
+                this.bgOpacity = max(this.bgOpacity - 150 * delta, 0);
+                this.textOpacity = max(this.bgOpacity - 150 * delta, 0);
+                this.text = `Vamos ler rébus?\nRébus é uma palavra formada quando juntamos os primeiros\npedacinhos de outras palavras.\nVeja!`;
+                break;
+            case 2:
+                this.bgOpacity = 0;
+                this.textOpacity = 0;
+                break;
+            case 3:
+                this.bgOpacity = min(this.bgOpacity + 150 * delta, 200);
+                this.textOpacity = min(this.bgOpacity + 150 * delta, 255);
+                this.text = `Que palavra será formada ao juntarmos o começo dessas duas palavras?`;
+                break;
+            case 4:
+                this.bgOpacity = max(this.bgOpacity - 150 * delta, 0);
+                this.textOpacity = max(this.bgOpacity - 150 * delta, 0);
+                this.text = `Que palavra será formada ao juntarmos o começo dessas duas palavras?`;
+                break;
+            case 5:
+                this.bgOpacity = 0;
+                this.textOpacity = 0;
+                break;
+            case 7:
+                this.bgOpacity = min(this.bgOpacity + 150 * delta, 200);
+                this.textOpacity = min(this.bgOpacity + 150 * delta, 255);
+                this.text = `Agora é sua vez!`;
+                break;
+        }
+
+        db.noStroke();
+        db.fill(0, this.bgOpacity);
+        db.rectMode(CENTER);
+        db.rect(db.width / 2, db.height / 2, 1800, 600, 40, 40);
+        db.textAlign(CENTER, CENTER);
+        db.fill(255, this.textOpacity);
+        db.textSize(40);
+        db.text(this.text, db.width / 2, db.height / 2 - 100);
+    }
+}