Tasks:

  1. Looking into the "UI elements" of phaser
    1. Create a new project using the barebone extracted from the "part1" of the last example ( You should only have a blank )
    2. You have already seen button in the HTML5 Audio → audio Sprite example.
      1. Add several buttons assign them callbacks to change a text on screen. You'll need asset
        1. <Your example folder>/public/assets/ui/flixel-button.png
        2. <Your example folder>/public/assets/fonts/bitmap/nokia16black.png
        3. <Your example folder>/public/assets/fonts/bitmap/nokia16black.xml
      2. Optional: if you have refactored your previous code using Scene, put all the buttons into sceneA, and have a button unload sceneA and load the previous game.
    3. In the menu (or menu scene) add a bouncing draggable button, refer to : physics→ arcade→ draggable , game objects→ container→ Arcade Physics Body Test, physics→ Arcade→ Draggable body
      1. Hint : You need an additional "makephysicsbutton" function, put both button and text into a container, you need to disable the setInteractive for the bitmap or it will catch the click before the container does
      2. Hint: Use the this.physics.world.enable(...); for your container, if you copied the makebutton, the collision box size should be button's width x 2 and button's height x 1.5, pay attention to the setScale for the button Image.
    4. Deliverable:
      1. A menu scene with several buttons and a draggable button.
      2. Clicking on each button (except for the draggable one) will result in text change according to the button name
      3. Optional: Has a button the load your game as the main scene ( you'll need to do the scene optional task in platformer extended)
  2. Loading a tilemap
    1. Create a new project and try to put the code in Depth Sorting → Isometric Map to work.
      1. You'll need assets:
        1. <Your example folder>/public/assets/tests/iso/isometric-grass-and-water.json
        2. <Your example folder>/public/assets/tests/iso/isometric-grass-and-water.png
        3. <Your example folder>/public/assets/tests/iso/skeleton8.png
        4. <Your example folder>/public/assets/tests/iso/rem_0002.png
      2. Refer to the example of Input→ Mouse→ Pointer Lock
        1. Instead of camera moving it self
        2. Capture the mouse when clicking the game window
        3. Have a software mouse pointer ( Assume you already know how to add picture/sprite into the game, have 8 dir arrow is not mandatory but please try to do it )
        4. Scroll the map when the mouse is near the edge
          1. Hint : the sprite of mouse needs <pointer sprite>. setScrollFactor(0)
          2. Hint : Move camera using the scrollX , scrollY property ref: https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Scene2D.Camera.html#scrollX__anchor ( of course it's not the only way )
        5. Have a key that release the mouse
          1. Hint : this.input.keyboard.on('keydown_Q', function (event){... from the example 2.a.ii
          2. Hint2 : the lockchange handler isn't correct, please refer to : https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
    2. Have an idea of how depth works
      1. Have one skeleton walk around a house
        1. Hint: you'll need to make new animation sequence, by editing the directions
      2. Consider how would you split the layers in the following scenes (No need for submission):
        1. Ref: https://opengameart.org/content/classical-ruin-tiles, https://opengameart.org/content/lpc-goblin
        2. Ref: https://opengameart.org/content/16x16-indoor-rpg-tileset-the-baseline
    3. Deliverable:
      1. A port of the example Depth Sorting → Isometric Map into full html version
      2. One skeleton goes around a house
      3. Capture when clicked and manipulate a soft mouse to scroll the map ( edge pointer switch not mandatory, can just use the same pointer if you don't have enough time )
  • No labels