Tasks:

  1. Setup and test a new webserver using http-server following Setting up a simple webserver using http-server Nodejs with Express server using the default "public" folder. (5mins)
    1. Since in Nodejs with Express server you have already installed Express, I will not be repeating the steps in detail.
    2. Create an index.html and put "Barebone Code" and try to make it work using your web-server.
      Warning: the browser will cache the page, need to reopen the browser to observe minor change.
      1. For Chrome on windows, press Shift + F5 to have a fresh load
    3. If you decide to setup XAMPP/NGINX or free cloud service, its up to you (but it's harder to do multiplayer through network). 
      no need to submit this sub task, but at least have one testbed should be running as you'll need it for subsequent tasks.
  2. Follow https://photonstorm.github.io/phaser3-docs/index.html#toc9__anchor and replace the files inside the "public" folder (10mins)
    1. Modifications and Tasks:
      1. Revision of browser debugger for chrome and firefox how to load them (assume you did web programming)
      2. If you use CDN:<script src="https://cdn.jsdelivr.net/npm/phaser@3.22.0/dist/phaser-arcade-physics.min.js"></script>
        1. For selfhost, you can open the link and save it inside the "javascripts" folder
      3. The resource is here, download and place them in the correct folder:
        1. http://labs.phaser.io/assets/skies/space3.png
        2. http://labs.phaser.io/assets/sprites/phaser3-logo.png
        3. http://labs.phaser.io/assets/particles/red.png
      4. Grab resource from opengameart website as the resource to replace the above image after successful test.
      5. Change the background picture and the logo by replacing the pngs.
      6. Try mess around the particle numbers.
    2. Deliverables:
      1. Zipped Game files consisting the modified code and assets
      2. A short video ( can be within 5 seconds ) of it working. Can film with your phone/or use OBS
        1. To make it play on confluence page, please refer to : Recommended setting for video for confluence
  3. Start https://phaser.io/tutorials/making-your-first-phaser-3-game (30min as all files just exist)
    1. Follow tutorial with stock assets (this is the link if they haven't noticed the download in tutorial)
    2. Modifications and Tasks:
      1. Add life points to the main character instead of on hit kill (post part10).
      2. Add reset scene ( use poll mode first, this will produce many warnings, google the "event mode" for input )
        1. var spaceBar;
        2. spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

        3. if ( spaceBar.isDown ){
              this.scene.restart();
          }

      3. Modify the key to use WSAD to control.
        1. Please read the post here: http://www.html5gamedevs.com/topic/7447-use-both-arrow-keys-and-wasd-controls/, answer by lewster32
        2. Hint: the answer actually don't work out of the box because it's for an earlier version, please refer to the spacebar code to figure out how to translate into phaser3.
      4. Add a mobile platform
        1. Reference: https://codepen.io/samme/pen/wYLQOY
        2. Hint: a bit tricky, you can't use the static platform provided by the original example.
        3. Hint2: don't forget to add collider copying the pattern for the staticplatform, or everything will fall through.
        4. Hint3: You can modify the path of the platform by changing the "tween" property.
        5. Warning: Do not tween coordinate directly ( Arcade physics engine doesn't support kinematic mode ), altering x/y will be considered a "teleport" instead of moving
      5. Add an enemy with different behaviour (Optional)
      6. Change the sprite picture using resource on opengameart, if you finished fast: (Optional)
        1. An example: https://opengameart.org/content/classic-hero-and-baddies-pack
        2. Hint: you need a little-bit photoshopping
        3. Go through tutorial Using texture packer and talk about the work flow (may also talk about what to demand from IM students)
        4. Introduce the converter Phaser(JSONArray) to Phaser3 converter for texturepacker (Linked)
        5. Using the contra asset in the tutorial or make your own sprite and replace the main character in the sample game
          In the process, need to play with "animation → animation data" example to load the sprite.
    3. Deliverable:
      1. The zip of modified example game
        1. with different look
        2. at least one movable platform
      2. A short video ( can be within 5 seconds ) of it working. Can film with your phone/or use OBS
        1. To make it play on confluence page, please refer to : Recommended setting for video for confluence
  4. Start the example pack using the phaser3-examples-master.zip from Archives for Some online Resources (15mins)
    1. Goto audio→ HTML5 Audio→ Play audio file
      1. Add a bgm to the main game.
    2. Goto audio→ Audio sprite
      1. Add at least one audio sprite.
      2. Instead of playing the "button name", play the <sound name> inside the JSON file.
    3. Deliverable:
      1. The zip of modified Previously modified game with
        1. A BGM
        2. At least one sound effect when an event happens.
      2. A short video ( can be within 5 seconds ) of it working. Can film with your phone/or use OBS
        1. To make it play on confluence page, please refer to : Recommended setting for video for confluence
  • No labels