Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: devshareacademy/code-examples-from-my-video-content
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: phaser-3-animation-completion-event-demo
Choose a base ref
...
head repository: devshareacademy/code-examples-from-my-video-content
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref

Commits on Sep 13, 2023

  1. Copy the full SHA
    10452bf View commit details
  2. Update README.md

    scottwestover authored Sep 13, 2023
    Copy the full SHA
    07ad23d View commit details
  3. Update README.md

    scottwestover authored Sep 13, 2023
    Copy the full SHA
    7efb6b9 View commit details
  4. Update README.md

    scottwestover authored Sep 13, 2023
    Copy the full SHA
    a32f6d7 View commit details
  5. Update README.md

    scottwestover authored Sep 13, 2023
    Copy the full SHA
    ddc28a0 View commit details

Commits on Sep 25, 2023

  1. updated readmes to have links to demos

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Sep 25, 2023
    Copy the full SHA
    d7c76e9 View commit details
  2. updated readmes to have links to demos

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Sep 25, 2023
    Copy the full SHA
    29073d9 View commit details

Commits on Oct 13, 2023

  1. added missing assets for crop game object demo

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Oct 13, 2023
    Copy the full SHA
    88b6b27 View commit details
  2. updated docs for crop game example demo

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Oct 13, 2023
    Copy the full SHA
    704eaba View commit details
  3. updated readme files to have proper links

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Oct 13, 2023
    Copy the full SHA
    916a147 View commit details
  4. created basic template for geometry mask

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Oct 13, 2023
    Copy the full SHA
    771635d View commit details

Commits on Oct 17, 2023

  1. finished geometry mask example

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Oct 17, 2023
    Copy the full SHA
    6100d46 View commit details
  2. finished geometry mask example

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Oct 17, 2023
    Copy the full SHA
    90240ab View commit details
  3. Update index.html

    scottwestover authored Oct 17, 2023
    Copy the full SHA
    f21bd6b View commit details
  4. Merge pull request #17 from devshareacademy/geometry-mask

    Geometry mask phaser 3 demo
    scottwestover authored Oct 17, 2023
    Copy the full SHA
    8614ceb View commit details

Commits on Nov 13, 2023

  1. created initial project structure for nine slice demo

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Nov 13, 2023
    Copy the full SHA
    9092ec4 View commit details
  2. finished nine-slice demo with canvas api

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Nov 13, 2023
    Copy the full SHA
    f9c0ec4 View commit details
  3. fixed nine slice link to demo

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Nov 13, 2023
    Copy the full SHA
    524fe5f View commit details

Commits on Nov 14, 2023

  1. Merge pull request #19 from devshareacademy/canvas-nine-slice

    Canvas nine slice demo
    scottwestover authored Nov 14, 2023
    Copy the full SHA
    9c2e039 View commit details

Commits on Dec 4, 2023

  1. [GH-20] added phaser 3 custom nine slice demo

    Created basic example of how to implement the nine slice image scaling
    technique using images in phaser 3. This was added since earlier versions
    of the library don't have native support for nine slice, and at this time
    later versions only support nine slice when using webgl.
    
    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Dec 4, 2023
    Copy the full SHA
    1b33673 View commit details

Commits on Dec 6, 2023

  1. minor changes

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Dec 6, 2023
    Copy the full SHA
    705d8ef View commit details

Commits on Dec 19, 2023

  1. Copy the full SHA
    9e177c1 View commit details
  2. [GH-20] fixed docs tied to custom nine slice code

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Dec 19, 2023
    Copy the full SHA
    ca0829a View commit details
  3. [GH-20] fixed docs 📝

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Dec 19, 2023
    Copy the full SHA
    898debd View commit details

Commits on Jan 8, 2024

  1. added mobile swipe example

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jan 8, 2024
    Copy the full SHA
    5d04763 View commit details
  2. added informative text for swipe demo

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jan 8, 2024
    Copy the full SHA
    2dc51ef View commit details
  3. modified settings

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jan 8, 2024
    Copy the full SHA
    ab70ea6 View commit details
  4. :docs: updated readme

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jan 8, 2024
    Copy the full SHA
    3cbb439 View commit details

Commits on Jan 15, 2024

  1. added demo for phaser 3 drag events

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jan 15, 2024
    Copy the full SHA
    2e3ddc1 View commit details

Commits on Jan 18, 2024

  1. updated example name

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jan 18, 2024
    Copy the full SHA
    8941178 View commit details

Commits on Feb 13, 2024

  1. wip: adding code from examples

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Feb 13, 2024
    Copy the full SHA
    9792a7b View commit details

Commits on Jul 5, 2024

  1. updated demos

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jul 5, 2024
    Copy the full SHA
    583edea View commit details
  2. updated minimap docs

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jul 5, 2024
    Copy the full SHA
    a0262f6 View commit details

Commits on Jul 8, 2024

  1. added demo of minimap 2 using images

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Jul 8, 2024
    Copy the full SHA
    0abb587 View commit details

Commits on Jul 23, 2024

  1. Update README.md

    scottwestover authored Jul 23, 2024
    Copy the full SHA
    fc3cbc8 View commit details

Commits on Oct 29, 2024

  1. Update README.md

    scottwestover authored Oct 29, 2024
    Copy the full SHA
    d9f5b60 View commit details
  2. Update README.md

    scottwestover authored Oct 29, 2024
    Copy the full SHA
    4dcee8f View commit details
  3. Update README.md

    scottwestover authored Oct 29, 2024
    Copy the full SHA
    3630121 View commit details
  4. Update README.md

    scottwestover authored Oct 29, 2024
    Copy the full SHA
    bcbdc4e View commit details
  5. Update README.md

    scottwestover authored Oct 29, 2024
    Copy the full SHA
    a055ab7 View commit details
  6. Update README.md

    scottwestover authored Oct 29, 2024
    Copy the full SHA
    a57b105 View commit details

Commits on Nov 15, 2024

  1. added example for new font loader

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Nov 15, 2024
    Copy the full SHA
    8c5c701 View commit details
  2. completed code for native fonts

    Signed-off-by: Scott Westover <scottwestover2006@gmail.com>
    scottwestover committed Nov 15, 2024
    Copy the full SHA
    2b948f7 View commit details
  3. Merge pull request #27 from devshareacademy/phaser-custom-fonts-native

    Phaser custom fonts native
    scottwestover authored Nov 15, 2024
    Copy the full SHA
    4af1714 View commit details
  4. Update README.md

    scottwestover authored Nov 15, 2024
    Copy the full SHA
    0f84482 View commit details
Showing with 1,044,443 additions and 12 deletions.
  1. +3 −0 .vscode/settings.json
  2. +4 −0 README.md
  3. +9 −2 canavs-api/basic-image-example/README.md
  4. BIN canavs-api/basic-image-example/docs/example.png
  5. +3 −0 canavs-api/nine-slice-example/.vscode/extensions.json
  6. +12 −0 canavs-api/nine-slice-example/.vscode/settings.json
  7. +20 −0 canavs-api/nine-slice-example/README.md
  8. BIN canavs-api/nine-slice-example/assets/bdragon1727/border.png
  9. +1 −0 canavs-api/nine-slice-example/assets/bdragon1727/credit.txt
  10. BIN canavs-api/nine-slice-example/assets/kenneys-assets/ui-space-expansion/glassPanel.png
  11. +14 −0 canavs-api/nine-slice-example/assets/kenneys-assets/ui-space-expansion/license.txt
  12. BIN canavs-api/nine-slice-example/docs/example.gif
  13. +33 −0 canavs-api/nine-slice-example/index.html
  14. +7 −0 canavs-api/nine-slice-example/jsconfig.json
  15. +134 −0 canavs-api/nine-slice-example/src/main.js
  16. +11 −0 developer-bytes-useful-vs-code-shortcuts/keybindings.json
  17. +5 −2 phaser-3/3.60/animation-completion-events/README.md
  18. BIN phaser-3/3.60/animation-completion-events/docs/example.gif
  19. +8 −1 phaser-3/3.60/crop-game-objects/README.md
  20. +4 −0 phaser-3/3.60/crop-game-objects/assets/credit.txt
  21. BIN phaser-3/3.60/crop-game-objects/assets/icicle.png
  22. BIN phaser-3/3.60/crop-game-objects/docs/example.gif
  23. +1 −3 phaser-3/3.60/crop-game-objects/src/main.js
  24. +5 −2 phaser-3/3.60/custom-fonts/README.md
  25. BIN phaser-3/3.60/custom-fonts/docs/example.png
  26. +3 −0 phaser-3/3.60/custom-nine-slice/.vscode/extensions.json
  27. +12 −0 phaser-3/3.60/custom-nine-slice/.vscode/settings.json
  28. +20 −0 phaser-3/3.60/custom-nine-slice/README.md
  29. BIN phaser-3/3.60/custom-nine-slice/assets/bdragon1727/border.png
  30. +1 −0 phaser-3/3.60/custom-nine-slice/assets/bdragon1727/credit.txt
  31. BIN phaser-3/3.60/custom-nine-slice/assets/kenneys-assets/ui-space-expansion/glassPanel.png
  32. +14 −0 phaser-3/3.60/custom-nine-slice/assets/kenneys-assets/ui-space-expansion/license.txt
  33. BIN phaser-3/3.60/custom-nine-slice/docs/example.gif
  34. +29 −0 phaser-3/3.60/custom-nine-slice/index.html
  35. +7 −0 phaser-3/3.60/custom-nine-slice/jsconfig.json
  36. +1 −0 phaser-3/3.60/custom-nine-slice/src/lib/phaser.js
  37. +119 −0 phaser-3/3.60/custom-nine-slice/src/main.js
  38. +114,610 −0 phaser-3/3.60/custom-nine-slice/src/types/phaser.d.ts
  39. +3 −0 phaser-3/3.60/drag-game-objects-pointer-events/.vscode/extensions.json
  40. +12 −0 phaser-3/3.60/drag-game-objects-pointer-events/.vscode/settings.json
  41. +13 −0 phaser-3/3.60/drag-game-objects-pointer-events/README.md
  42. BIN phaser-3/3.60/drag-game-objects-pointer-events/docs/example.gif
  43. +18 −0 phaser-3/3.60/drag-game-objects-pointer-events/index.html
  44. +7 −0 phaser-3/3.60/drag-game-objects-pointer-events/jsconfig.json
  45. +68 −0 phaser-3/3.60/drag-game-objects-pointer-events/src/draggable.js
  46. +1 −0 phaser-3/3.60/drag-game-objects-pointer-events/src/lib/phaser.js
  47. +38 −0 phaser-3/3.60/drag-game-objects-pointer-events/src/main.js
  48. +114,610 −0 phaser-3/3.60/drag-game-objects-pointer-events/src/types/phaser.d.ts
  49. +3 −0 phaser-3/3.60/geometry-camera-mask/.vscode/extensions.json
  50. +11 −0 phaser-3/3.60/geometry-camera-mask/.vscode/settings.json
  51. +17 −0 phaser-3/3.60/geometry-camera-mask/README.md
  52. BIN phaser-3/3.60/geometry-camera-mask/assets/preview.png
  53. +23 −0 phaser-3/3.60/geometry-camera-mask/assets/public-license.txt
  54. +29 −0 phaser-3/3.60/geometry-camera-mask/index.html
  55. +7 −0 phaser-3/3.60/geometry-camera-mask/jsconfig.json
  56. +1 −0 phaser-3/3.60/geometry-camera-mask/src/lib/phaser.js
  57. +103 −0 phaser-3/3.60/geometry-camera-mask/src/main.js
  58. +114,610 −0 phaser-3/3.60/geometry-camera-mask/src/types/phaser.d.ts
  59. +3 −0 phaser-3/3.60/mobile-swipe/.vscode/extensions.json
  60. +12 −0 phaser-3/3.60/mobile-swipe/.vscode/settings.json
  61. +13 −0 phaser-3/3.60/mobile-swipe/README.md
  62. BIN phaser-3/3.60/mobile-swipe/docs/example.gif
  63. +18 −0 phaser-3/3.60/mobile-swipe/index.html
  64. +7 −0 phaser-3/3.60/mobile-swipe/jsconfig.json
  65. +1 −0 phaser-3/3.60/mobile-swipe/src/lib/phaser.js
  66. +71 −0 phaser-3/3.60/mobile-swipe/src/main.js
  67. +145 −0 phaser-3/3.60/mobile-swipe/src/swipe.js
  68. +114,610 −0 phaser-3/3.60/mobile-swipe/src/types/phaser.d.ts
  69. +5 −2 phaser-3/3.60/simple-scene-transitions/README.md
  70. BIN phaser-3/3.60/simple-scene-transitions/docs/example.gif
  71. +3 −0 phaser-3/3.70/draggable-demo/.vscode/extensions.json
  72. +11 −0 phaser-3/3.70/draggable-demo/.vscode/settings.json
  73. +17 −0 phaser-3/3.70/draggable-demo/README.md
  74. BIN phaser-3/3.70/draggable-demo/assets/starfighter/background.png
  75. BIN phaser-3/3.70/draggable-demo/assets/starfighter/big-a.png
  76. +23 −0 phaser-3/3.70/draggable-demo/assets/starfighter/public-license.txt
  77. BIN phaser-3/3.70/draggable-demo/assets/starfighter/ship-a1.png
  78. BIN phaser-3/3.70/draggable-demo/docs/example.gif
  79. +23 −0 phaser-3/3.70/draggable-demo/index.html
  80. +7 −0 phaser-3/3.70/draggable-demo/jsconfig.json
  81. +1 −0 phaser-3/3.70/draggable-demo/src/lib/phaser.js
  82. +38 −0 phaser-3/3.70/draggable-demo/src/main.js
  83. +114,610 −0 phaser-3/3.70/draggable-demo/src/types/phaser.d.ts
  84. +3 −0 phaser-3/3.70/snapshot-demo/.vscode/extensions.json
  85. +11 −0 phaser-3/3.70/snapshot-demo/.vscode/settings.json
  86. +17 −0 phaser-3/3.70/snapshot-demo/README.md
  87. BIN phaser-3/3.70/snapshot-demo/assets/starfighter/background.png
  88. BIN phaser-3/3.70/snapshot-demo/assets/starfighter/big-a.png
  89. +23 −0 phaser-3/3.70/snapshot-demo/assets/starfighter/public-license.txt
  90. BIN phaser-3/3.70/snapshot-demo/assets/starfighter/ship-a1.png
  91. BIN phaser-3/3.70/snapshot-demo/docs/example.gif
  92. +23 −0 phaser-3/3.70/snapshot-demo/index.html
  93. +7 −0 phaser-3/3.70/snapshot-demo/jsconfig.json
  94. +1 −0 phaser-3/3.70/snapshot-demo/src/lib/phaser.js
  95. +64 −0 phaser-3/3.70/snapshot-demo/src/main.js
  96. +114,610 −0 phaser-3/3.70/snapshot-demo/src/types/phaser.d.ts
  97. +3 −0 phaser-3/3.80/minimap-1-demo/.vscode/extensions.json
  98. +12 −0 phaser-3/3.80/minimap-1-demo/.vscode/settings.json
  99. +21 −0 phaser-3/3.80/minimap-1-demo/README.md
  100. +100 −0 phaser-3/3.80/minimap-1-demo/assets/data/animations.json
  101. +38 −0 phaser-3/3.80/minimap-1-demo/assets/data/assets.json
  102. +7 −0 phaser-3/3.80/minimap-1-demo/assets/data/quests.json
  103. BIN phaser-3/3.80/minimap-1-demo/assets/minimap/bonus1_full.png
  104. BIN phaser-3/3.80/minimap-1-demo/assets/minimap/minimap.png
  105. BIN phaser-3/3.80/minimap-1-demo/assets/minimap/tile056.png
  106. +1,311 −0 phaser-3/3.80/minimap-1-demo/assets/minimap/town.json
  107. BIN phaser-3/3.80/minimap-1-demo/assets/minimap/town.png
  108. BIN phaser-3/3.80/minimap-1-demo/docs/example.gif
  109. +23 −0 phaser-3/3.80/minimap-1-demo/index.html
  110. +7 −0 phaser-3/3.80/minimap-1-demo/jsconfig.json
  111. +31 −0 phaser-3/3.80/minimap-1-demo/src/components/common/index.js
  112. +13 −0 phaser-3/3.80/minimap-1-demo/src/components/events/event-bus-component.js
  113. +63 −0 phaser-3/3.80/minimap-1-demo/src/components/input/input-component.js
  114. +43 −0 phaser-3/3.80/minimap-1-demo/src/components/input/keyboard-input-component.js
  115. +97 −0 phaser-3/3.80/minimap-1-demo/src/components/movement/grid-movement-animation-component.js
  116. +147 −0 phaser-3/3.80/minimap-1-demo/src/components/movement/grid-movement-component.js
  117. +29 −0 phaser-3/3.80/minimap-1-demo/src/components/movement/grid-utils.js
  118. +107 −0 phaser-3/3.80/minimap-1-demo/src/game-scene.js
  119. +1 −0 phaser-3/3.80/minimap-1-demo/src/lib/phaser.js
  120. +18 −0 phaser-3/3.80/minimap-1-demo/src/main.js
  121. +116,274 −0 phaser-3/3.80/minimap-1-demo/src/types/phaser.d.ts
  122. +3 −0 phaser-3/3.80/minimap-2-demo/.vscode/extensions.json
  123. +12 −0 phaser-3/3.80/minimap-2-demo/.vscode/settings.json
  124. +17 −0 phaser-3/3.80/minimap-2-demo/README.md
  125. +100 −0 phaser-3/3.80/minimap-2-demo/assets/data/animations.json
  126. +38 −0 phaser-3/3.80/minimap-2-demo/assets/data/assets.json
  127. +7 −0 phaser-3/3.80/minimap-2-demo/assets/data/quests.json
  128. BIN phaser-3/3.80/minimap-2-demo/assets/minimap/bonus1_full.png
  129. BIN phaser-3/3.80/minimap-2-demo/assets/minimap/minimap.png
  130. BIN phaser-3/3.80/minimap-2-demo/assets/minimap/tile056.png
  131. +1,311 −0 phaser-3/3.80/minimap-2-demo/assets/minimap/town.json
  132. BIN phaser-3/3.80/minimap-2-demo/assets/minimap/town.png
  133. BIN phaser-3/3.80/minimap-2-demo/docs/example.gif
  134. +23 −0 phaser-3/3.80/minimap-2-demo/index.html
  135. +7 −0 phaser-3/3.80/minimap-2-demo/jsconfig.json
  136. +31 −0 phaser-3/3.80/minimap-2-demo/src/components/common/index.js
  137. +13 −0 phaser-3/3.80/minimap-2-demo/src/components/events/event-bus-component.js
  138. +63 −0 phaser-3/3.80/minimap-2-demo/src/components/input/input-component.js
  139. +43 −0 phaser-3/3.80/minimap-2-demo/src/components/input/keyboard-input-component.js
  140. +97 −0 phaser-3/3.80/minimap-2-demo/src/components/movement/grid-movement-animation-component.js
  141. +147 −0 phaser-3/3.80/minimap-2-demo/src/components/movement/grid-movement-component.js
  142. +29 −0 phaser-3/3.80/minimap-2-demo/src/components/movement/grid-utils.js
  143. +105 −0 phaser-3/3.80/minimap-2-demo/src/game-scene.js
  144. +1 −0 phaser-3/3.80/minimap-2-demo/src/lib/phaser.js
  145. +19 −0 phaser-3/3.80/minimap-2-demo/src/main.js
  146. +146 −0 phaser-3/3.80/minimap-2-demo/src/minimap-scene.js
  147. +116,274 −0 phaser-3/3.80/minimap-2-demo/src/types/phaser.d.ts
  148. +3 −0 phaser-3/3.87/custom-fonts/.vscode/extensions.json
  149. +11 −0 phaser-3/3.87/custom-fonts/.vscode/settings.json
  150. +17 −0 phaser-3/3.87/custom-fonts/README.md
  151. BIN phaser-3/3.87/custom-fonts/assets/fonts/Kenney-Future-Narrow.ttf
  152. +22 −0 phaser-3/3.87/custom-fonts/assets/fonts/License.txt
  153. BIN phaser-3/3.87/custom-fonts/docs/example.png
  154. +27 −0 phaser-3/3.87/custom-fonts/index.html
  155. +7 −0 phaser-3/3.87/custom-fonts/jsconfig.json
  156. +1 −0 phaser-3/3.87/custom-fonts/src/lib/phaser.js
  157. +58 −0 phaser-3/3.87/custom-fonts/src/main.js
  158. +118,425 −0 phaser-3/3.87/custom-fonts/src/types/phaser.d.ts
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -4,6 +4,10 @@ Contains various code examples that are used in my shared video content on YouTu

Each sub project includes a `README.md` file that has more details on that particular project.

## Demo

To view the available demos, please go here: [Examples](https://devshareacademy.github.io/code-examples-from-my-video-content/)

## Issues

For any issues you encounter, please open a new [GitHub Issue](https://github.com/devshareacademy/code-examples-from-my-video-content/issues) on this project.
11 changes: 9 additions & 2 deletions canavs-api/basic-image-example/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
# Canvas API - Working With Images

![demo](docs/example.png)

A quick demo of how you can draw and work with image data when drawing images to your HTML `<canvas>` element.

For a detailed walkthrough, checkout my video on YouTube here:

TODO
[<img src="https://i.ytimg.com/vi/PJM8isAuDoI/hqdefault.jpg">](https://youtu.be/PJM8isAuDoI "How to Draw, Scale, and Slice Images using the Canvas API")

Link to live demo:
TODO

[Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/canavs-api/basic-image-example/index.html)

## Credit

The spritesheet that was used in this demo were created by [ansimuz](https://ansimuz.itch.io/grunge-horror-environment).
Binary file added canavs-api/basic-image-example/docs/example.png

Unable to render rich display

3 changes: 3 additions & 0 deletions canavs-api/nine-slice-example/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
12 changes: 12 additions & 0 deletions canavs-api/nine-slice-example/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": ["bdragon", "kenneys", "tileset"],
"prettier.printWidth": 120
}
20 changes: 20 additions & 0 deletions canavs-api/nine-slice-example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Canvas API - Nine Slice Demo

![demo](docs/example.gif)

A quick demo of how you can use the nine slice scaling technique with the Canvas API when drawing your images to the HTML `<canvas>` element.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/cJdd2hectO8/hqdefault.jpg">](https://youtu.be/cJdd2hectO8 "Canvas Wizardry: Say Goodbye to Stretch with 9-Slice Scaling!")

Link to live demo:

[Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/canavs-api/nine-slice-example/index.html)

## Credit

The images used in this demo were created by:

- [bdragon1727](https://bdragon1727.itch.io/border-and-panels-menu-part-1)
- [kenney](https://www.kenney.nl/assets/ui-pack-space-expansion)

Unable to render rich display

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
https://bdragon1727.itch.io/border-and-panels-menu-part-1

Unable to render rich display

Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

###############################################################################

UI pack: Space extension by Kenney Vleugels (www.kenney.nl)

------------------------------

License (CC0)
http://creativecommons.org/publicdomain/zero/1.0/

You may use these graphics in personal and commercial projects.
Credit (Kenney or www.kenney.nl) would be nice but is not mandatory.

###############################################################################
Binary file added canavs-api/nine-slice-example/docs/example.gif

Unable to render rich display

33 changes: 33 additions & 0 deletions canavs-api/nine-slice-example/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas API - Nine Slice Example</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
background: #000000;
box-shadow: 15px 15px 10px -5px rgba(0, 0, 0, 0.2);
image-rendering: pixelated;
zoom: 2;
}
</style>
</head>
<body>
<div class="container" id="game-container">
<canvas id="game" width="400" height="300"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions canavs-api/nine-slice-example/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
134 changes: 134 additions & 0 deletions canavs-api/nine-slice-example/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/**
* @typedef SubRectangle
* @type {[number, number, number, number]}
*/

/**
* @param {string} src
* @returns {Promise<HTMLImageElement>}
*/
function loadImage(src) {
return new Promise((resolve) => {
const img = new Image();
img.addEventListener(
'load',
() => {
resolve(img);
},
false
);
img.src = src;
});
}

/*
A B
+---+----------------------+---+
C | 1 | 2 | 3 |
+---+----------------------+---+
| | | |
| 4 | 5 | 6 |
| | | |
+---+----------------------+---+
D | 7 | 8 | 9 |
+---+----------------------+---+
areas 1, 3, 7 and 9 (the corners) will remain unscaled
areas 2 and 8 will be stretched horizontally only
areas 4 and 6 will be stretched vertically only
area 5 will be stretched both horizontally and vertically
*/

/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {HTMLImageElement} img
* @param {number} leftWidth
* @param {number} rightWidth
* @param {number} topHeight
* @param {number} bottomHeight
* @param {number} x
* @param {number} y
* @param {number} width
* @param {number} height
* @returns {void}
*/
function drawNineSliceImage(ctx, img, leftWidth, rightWidth, topHeight, bottomHeight, x, y, width, height) {
const totalWidthCut = leftWidth + rightWidth;
const totalHeightCut = topHeight + bottomHeight;
// break the main image up into 9 parts, based on the size of the slice.
// each piece should be [x, y, width, height]

// start in the top left corner for our first cut
/** @type {SubRectangle} */
const topLeft = [0, 0, leftWidth, topHeight];
// for the middle, we need to calculate the width remaining after we take our two cuts
/** @type {SubRectangle} */
const topMiddle = [leftWidth, 0, img.width - totalWidthCut, topHeight];
// for the top right side corner we just need to take the total width and remove the cut length
/** @type {SubRectangle} */
const topRight = [img.width - rightWidth, 0, rightWidth, topHeight];

// for the middle left, we take the overall image height and subtract the size of the two corner cuts to get new height
const middleRowHeight = img.height - totalHeightCut;
/** @type {SubRectangle} */
const middleLeft = [0, topHeight, leftWidth, middleRowHeight];
// for the middle, we need to take the overall image height and width, subtract the two corner cuts to get the new dimensions
/** @type {SubRectangle} */
const center = [leftWidth, topHeight, img.width - totalWidthCut, middleRowHeight];
// for the middle right, we need to do similar logic that was done for the middle left piece
/** @type {SubRectangle} */
const middleRight = [img.width - rightWidth, topHeight, rightWidth, middleRowHeight];

// for the bottom left, we take the overall image height and subtract the corner cut
const bottomRowY = img.height - bottomHeight;
/** @type {SubRectangle} */
const bottomLeft = [0, bottomRowY, leftWidth, bottomHeight];
// for the bottom middle, we do the same logic we did in the top middle frame, just at a lower y value
/** @type {SubRectangle} */
const bottomMiddle = [leftWidth, bottomRowY, img.width - totalWidthCut, bottomHeight];
// for the bottom right, we do the same logic we did in the top right frame, just at a lower y value
/** @type {SubRectangle} */
const bottomRight = [img.width - rightWidth, bottomRowY, rightWidth, bottomHeight];

// now that we have our nine sub rectangles that make up the original source image, we can draw those onto the canvas element
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Note: the sx, sy, sWidth, and sHeight where already calculated above

// draw the top row
ctx.drawImage(img, ...topLeft, x, y, leftWidth, topHeight);
ctx.drawImage(img, ...topMiddle, x + leftWidth, y, width - totalWidthCut, topHeight);
ctx.drawImage(img, ...topRight, x + width - rightWidth, y, rightWidth, topHeight);
// draw the middle row
ctx.drawImage(img, ...middleLeft, x, y + topHeight, leftWidth, height - totalHeightCut);
ctx.drawImage(img, ...center, x + leftWidth, y + topHeight, width - totalWidthCut, height - totalHeightCut);
ctx.drawImage(img, ...middleRight, x + width - rightWidth, y + topHeight, rightWidth, height - totalHeightCut);
// draw the bottom row
ctx.drawImage(img, ...bottomLeft, x, y + height - bottomHeight, leftWidth, bottomHeight);
ctx.drawImage(img, ...bottomMiddle, x + leftWidth, y + height - bottomHeight, width - totalWidthCut, bottomHeight);
ctx.drawImage(img, ...bottomRight, x + width - rightWidth, y + height - bottomHeight, rightWidth, bottomHeight);
}

void (async function () {
const canvas = document.getElementById('game');
if (!(canvas instanceof HTMLCanvasElement)) {
console.log('HTMLCanvasElement not found');
return;
}
const ctx = canvas.getContext('2d');
if (!(ctx instanceof CanvasRenderingContext2D)) {
console.log('CanvasRenderingContext2D not found');
return;
}

const img = await loadImage('assets/bdragon1727/border.png');
// const img = await loadImage('assets/kenneys-assets/ui-space-expansion/glassPanel.png');

// // example of drawing image directly
// ctx.drawImage(img, 0, 0);
// // example of scaling by providing width and height on destination
// ctx.drawImage(img, 0, 0, img.width * 1.5, img.height * 1.5);
//ctx.drawImage(img, 25, 25, 350, 250);

// example of using nine slice technique to scale image
drawNineSliceImage(ctx, img, 32, 32, 32, 32, 25, 25, 350, 250);
})();
11 changes: 11 additions & 0 deletions developer-bytes-useful-vs-code-shortcuts/keybindings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Place your key bindings in this file to override the defaults
[
{
"key": "cmd+shift+b",
"command": "workbench.action.toggleActivityBarVisibility"
},
{
"key": "cmd+shift+m",
"command": "editor.action.toggleMinimap"
}
]
7 changes: 5 additions & 2 deletions phaser-3/3.60/animation-completion-events/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
# Phaser 3 - Animation Completion Event Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in events of Phaser 3 to know when an animation is completed, that way you can use that event to perform some additional game logic.

For a detailed walkthrough, checkout my video on YouTube here:

TODO
[<img src="https://i.ytimg.com/vi/W-INH27SjKc/hqdefault.jpg">](https://youtu.be/W-INH27SjKc "Phaser 3 Mastery: How to Listen and React to Animation Completion Events")

Link to live demo:
TODO

[Animation Completion Event Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/animation-completion-events/index.html)

## Credit

Unable to render rich display

9 changes: 8 additions & 1 deletion phaser-3/3.60/crop-game-objects/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
# Phaser 3 - Crop Game Object Demo

![demo](docs/example.gif)

A quick demo of how you can easily the built in Crop methods of Phaser 3 to crop what is being rendered on a game object.

For a detailed walkthrough, checkout my video on YouTube here:

TODO

Link to live demo:
TODO

[Crop Game Objects](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/crop-game-objects/index.html)

## Credit

The spritesheet that was used in this demo were created by [Essssam](https://essssam.itch.io/rocky-roads).
4 changes: 4 additions & 0 deletions phaser-3/3.60/crop-game-objects/assets/credit.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
This spritesheet was created by: Essssam

https://essssam.itch.io/rocky-roads

Binary file added phaser-3/3.60/crop-game-objects/assets/icicle.png

Unable to render rich display

Binary file added phaser-3/3.60/crop-game-objects/docs/example.gif

Unable to render rich display

4 changes: 1 addition & 3 deletions phaser-3/3.60/crop-game-objects/src/main.js
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@ class MainScene extends Phaser.Scene {
}

create() {
// create basic animations from the spritesheet
this.anims.create({
key: this.#iceAttackAnimationName,
frames: this.anims.generateFrameNumbers(this.#iceSpriteSheetAssetName, {
@@ -39,9 +40,6 @@ class MainScene extends Phaser.Scene {
.setOrigin(0.5, 0)
.setScale(2);

this.#icicle.once(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
console.log('animation completed');
});
this.#icicle.once(
Phaser.Animations.Events.ANIMATION_COMPLETE_KEY +
this.#iceAttackAnimationName,
7 changes: 5 additions & 2 deletions phaser-3/3.60/custom-fonts/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
# Phaser 3 - Custom Fonts Demo

![demo](docs/example.png)

A quick demo of how you can easily use custom fonts in Phaser 3 by using the [Web Font Loader](https://github.com/typekit/webfontloader). With the Web Font Loader, you can use your own custom fonts, and use fonts from a provider like Google Fonts.

For a detailed walkthrough, checkout my video on YouTube here:

TODO
[<img src="https://i.ytimg.com/vi/2JqqOxJu9dE/hqdefault.jpg">](https://youtu.be/2JqqOxJu9dE "Mastering Phaser 3: Elevate Your Game with Custom Web Fonts!")

Link to live demo:
TODO

[Custom Fonts](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/custom-fonts/index.html)

## Credit

Binary file added phaser-3/3.60/custom-fonts/docs/example.png

Unable to render rich display

3 changes: 3 additions & 0 deletions phaser-3/3.60/custom-nine-slice/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
12 changes: 12 additions & 0 deletions phaser-3/3.60/custom-nine-slice/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": ["bdragon", "kenneys"],
"prettier.printWidth": 120
}
20 changes: 20 additions & 0 deletions phaser-3/3.60/custom-nine-slice/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Phaser 3 - Custom Nine Slice Demo

![demo](docs/example.gif)

A quick demo of how you can build your own custom nine slice scaling functionality in Phaser 3 by using the built in Phaser 3 image and container game objects!

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/NIXDMdpLGMo/hqdefault.jpg">](https://youtu.be/NIXDMdpLGMo "Phaser 3 Nine-Slice Game Object: Say Goodbye to Image Distortions!")

Link to live demo:

[Custom Nine Slice Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/3.60/custom-nine-slice/index.html)

## Credit

The images used in this demo were created by:

- [bdragon1727](https://bdragon1727.itch.io/border-and-panels-menu-part-1)
- [kenney](https://www.kenney.nl/assets/ui-pack-space-expansion)

Unable to render rich display

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
https://bdragon1727.itch.io/border-and-panels-menu-part-1

Unable to render rich display

Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

###############################################################################

UI pack: Space extension by Kenney Vleugels (www.kenney.nl)

------------------------------

License (CC0)
http://creativecommons.org/publicdomain/zero/1.0/

You may use these graphics in personal and commercial projects.
Credit (Kenney or www.kenney.nl) would be nice but is not mandatory.

###############################################################################
Binary file added phaser-3/3.60/custom-nine-slice/docs/example.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions phaser-3/3.60/custom-nine-slice/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Custom Nine Slice</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container">
<h2>Phaser 3.60 - Custom Nine Slice</h2>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.60/custom-nine-slice/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
1 change: 1 addition & 0 deletions phaser-3/3.60/custom-nine-slice/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
119 changes: 119 additions & 0 deletions phaser-3/3.60/custom-nine-slice/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import Phaser from './lib/phaser.js';

const AssetKeys = Object.freeze({
PANEL: 'PANEL',
});

const AssetCutFrames = Object.freeze({
TL: 'TL',
TM: 'TM',
TR: 'TR',
ML: 'ML',
MM: 'MM',
MR: 'MR',
BL: 'BL',
BM: 'BM',
BR: 'BR',
});

class Game extends Phaser.Scene {
constructor() {
super({ key: 'Game' });
}

preload() {
this.load.image(AssetKeys.PANEL, 'assets/kenneys-assets/ui-space-expansion/glassPanel.png');
// this.load.image(AssetKeys.PANEL, 'assets/bdragon1727/border.png');
}

create() {
// this.add.image(this.scale.width / 2, this.scale.height / 2, AssetKeys.PANEL, 0);
// this.add.image(this.scale.width / 2, this.scale.height / 2, AssetKeys.PANEL, 0).setScale(7, 5);

// setup config for new custom nine slice objects
const cornerCut = 32;
const targetWidth = 600;
const targetHeight = 400;
const texture = this.sys.textures.get(AssetKeys.PANEL);
// get the original frame so we can the image dimensions
/** @type {Phaser.Textures.Frame} */
const baseFrame = texture.frames['__BASE'];
console.log(baseFrame.width, baseFrame.height);

// start in the top left corner for our first cut
texture.add(AssetCutFrames.TL, 0, 0, 0, cornerCut, cornerCut);
// for the middle, we need to calculate the width remaining after we take our two cuts
texture.add(AssetCutFrames.TM, 0, cornerCut, 0, baseFrame.width - cornerCut * 2, cornerCut);
// for the top right side corner we just need to take the total width and remove the cut length
texture.add(AssetCutFrames.TR, 0, baseFrame.width - cornerCut, 0, cornerCut, cornerCut);

// for the middle left, we take the overall image height and subtract the size of the two corner cuts to get new height
texture.add(AssetCutFrames.ML, 0, 0, cornerCut, cornerCut, baseFrame.height - cornerCut * 2);
// for the middle, we need to take the overall image height and width, subtract the two corner cuts to get the new dimensions
texture.add(
AssetCutFrames.MM,
0,
cornerCut,
cornerCut,
baseFrame.width - cornerCut * 2,
baseFrame.height - cornerCut * 2
);
// for the middle right, we need to do similar logic that was done for the middle left piece
texture.add(
AssetCutFrames.MR,
0,
baseFrame.width - cornerCut,
cornerCut,
cornerCut,
baseFrame.height - cornerCut * 2
);

// for the bottom left, we take the overall image height and subtract the corner cut
texture.add(AssetCutFrames.BL, 0, 0, baseFrame.height - cornerCut, cornerCut, cornerCut);
// for the middle and right, we do the same logic we did in th tm and tr frames, just at a lower y value
texture.add(
AssetCutFrames.BM,
0,
cornerCut,
baseFrame.height - cornerCut,
baseFrame.width - cornerCut * 2,
cornerCut
);
texture.add(AssetCutFrames.BR, 0, baseFrame.width - cornerCut, baseFrame.height - cornerCut, cornerCut, cornerCut);

const tl = this.add.image(0, 0, AssetKeys.PANEL, AssetCutFrames.TL).setOrigin(0);
const tm = this.add.image(tl.displayWidth, 0, AssetKeys.PANEL, AssetCutFrames.TM).setOrigin(0);
tm.displayWidth = targetWidth - cornerCut * 2;
const tr = this.add.image(tl.displayWidth + tm.displayWidth, 0, AssetKeys.PANEL, AssetCutFrames.TR).setOrigin(0);

const ml = this.add.image(0, tl.displayHeight, AssetKeys.PANEL, AssetCutFrames.ML).setOrigin(0);
ml.displayHeight = targetHeight - cornerCut * 2;
const mm = this.add.image(ml.displayWidth, ml.y, AssetKeys.PANEL, AssetCutFrames.MM).setOrigin(0);
mm.displayHeight = targetHeight - cornerCut * 2;
mm.displayWidth = targetWidth - cornerCut * 2;
const mr = this.add.image(ml.displayWidth + mm.displayWidth, ml.y, AssetKeys.PANEL, AssetCutFrames.MR).setOrigin(0);
mr.displayHeight = mm.displayHeight;

const bl = this.add.image(0, tl.displayHeight + ml.displayHeight, AssetKeys.PANEL, AssetCutFrames.BL).setOrigin(0);
const bm = this.add.image(bl.displayWidth, bl.y, AssetKeys.PANEL, AssetCutFrames.BM).setOrigin(0);
bm.displayWidth = tm.displayWidth;
const br = this.add.image(bl.displayWidth + bm.displayWidth, bl.y, AssetKeys.PANEL, AssetCutFrames.BR).setOrigin(0);

// finally, create a container to group our new game objects together in
this.add.container(100, 100, [tl, tm, tr, ml, mm, mr, bl, bm, br]);
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: 800,
height: 600,
},
backgroundColor: '#5c5b5b',
scene: [Game],
};

const game = new Phaser.Game(gameConfig);
114,610 changes: 114,610 additions & 0 deletions phaser-3/3.60/custom-nine-slice/src/types/phaser.d.ts

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": [],
"prettier.printWidth": 120
}
13 changes: 13 additions & 0 deletions phaser-3/3.60/drag-game-objects-pointer-events/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Phaser 3 - Draggable Game Objects With Pointer Events Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in touch events of Phaser 3 to allow you to drag game objects in your Phaser 3 Scene.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/jWglIBp4usY/hqdefault.jpg">](https://youtu.be/jWglIBp4usY "Touch & Drag: Creating Draggable Objects in Phaser 3 With Touch Events!")

Link to live demo:

[Draggable Game Objects Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/drag-game-objects/index.html)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions phaser-3/3.60/drag-game-objects-pointer-events/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Drag Game Objects With Pointer Events Demo</title>
<style>
html,
body {
margin: 0px;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.60/drag-game-objects-pointer-events/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
68 changes: 68 additions & 0 deletions phaser-3/3.60/drag-game-objects-pointer-events/src/draggable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import Phaser from './lib/phaser.js';

/**
* Uses the Phaser 3 built in touch events to allow a game object to be moved around a Phaser 3 Scene instance.
* The method will listen for the GameObject Destroy event and cleanup the various event listeners that
* were registered.
* @param {Phaser.GameObjects.Image | Phaser.GameObjects.Rectangle} gameObject
* @param {boolean} [enableLogs=false] enables logging for the various drag event callbacks. If the gameObject.name field
* is populated, this will be included in the log line.
*/
export function makeDraggable(gameObject, enableLogs = false) {
gameObject.setInteractive();

/**
* @param {string} message
* @returns {void}
*/
function log(message) {
if (enableLogs) {
console.debug(message);
}
}

/**
* @param {Phaser.Input.Pointer} pointer
* @returns {void}
*/
function onDrag(pointer) {
log(`[makeDraggable:onDrag] invoked for game object: ${gameObject.name}`);
gameObject.x = pointer.x;
gameObject.y = pointer.y;
}

/**
* @returns {void}
*/
function stopDrag() {
log(`[makeDraggable:stopDrag] invoked for game object: ${gameObject.name}`);
gameObject.on(Phaser.Input.Events.POINTER_DOWN, startDrag);
gameObject.off(Phaser.Input.Events.POINTER_MOVE, onDrag);
gameObject.off(Phaser.Input.Events.POINTER_UP, stopDrag);
gameObject.x = Math.round(gameObject.x);
gameObject.y = Math.round(gameObject.y);
}

/**
* @returns {void}
*/
function startDrag() {
log(`[makeDraggable:startDrag] invoked for game object: ${gameObject.name}`);
gameObject.off(Phaser.Input.Events.POINTER_DOWN, startDrag);
gameObject.on(Phaser.Input.Events.POINTER_MOVE, onDrag);
gameObject.on(Phaser.Input.Events.POINTER_UP, stopDrag);
}

/**
* @returns {void}
*/
function destroy() {
log(`[makeDraggable:destroy] invoked for game object: ${gameObject.name}`);
gameObject.off(Phaser.Input.Events.POINTER_DOWN, startDrag);
gameObject.off(Phaser.Input.Events.POINTER_MOVE, onDrag);
gameObject.off(Phaser.Input.Events.POINTER_UP, stopDrag);
}

gameObject.on(Phaser.Input.Events.POINTER_DOWN, startDrag);
gameObject.once(Phaser.GameObjects.Events.DESTROY, destroy);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
38 changes: 38 additions & 0 deletions phaser-3/3.60/drag-game-objects-pointer-events/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { makeDraggable } from './draggable.js';
import Phaser from './lib/phaser.js';

class GameScene extends Phaser.Scene {
constructor() {
super(GameScene.name);
}

create() {
const rectangle = this.add.rectangle(this.scale.width / 2, this.scale.height / 2, 100, 100, 0xffff00);
makeDraggable(rectangle);
this.add
.text(this.scale.width / 2, 550, 'try dragging the rectangle around the scene', {
align: 'center',
fontSize: '22px',
wordWrap: {
width: this.scale.width - 50,
},
})
.setOrigin(0.5);
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: 800,
height: 600,
autoCenter: Phaser.Scale.CENTER_BOTH,
mode: Phaser.Scale.FIT,
},
backgroundColor: '#5c5b5b',
scene: [GameScene],
};

const game = new Phaser.Game(gameConfig);
114,610 changes: 114,610 additions & 0 deletions phaser-3/3.60/drag-game-objects-pointer-events/src/types/phaser.d.ts

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
11 changes: 11 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": []
}
17 changes: 17 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Phaser 3 - Geometry Camera Mask

![demo](docs/example.gif)

In this example, we take a look at how we can create really nice custom level transitions by using the built in Phaser 3 Geometry Mask objects.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/dRwGjVj29s0/hqdefault.jpg">](https://youtu.be/dRwGjVj29s0 "Phaser 3 Tutorial: Custom Level Transitions With Geometry Masks!")

Link to live demo:

[Simple Scene Transitions](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/simple-scene-transitions/index.html)

## Credit

The image that was used in this demo was created by [ansimuz](https://ansimuz.itch.io/sunnyland-forest-of-illusion).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/assets/public-license.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Artwork created by Luis Zuno (@ansimuz)


LICENSE:
You may use these assets in personal or commercial projects. You can modify these assets to suit your needs. You can re-distribute the file.
Credit no required but appreciated it.

____________________

LINKS

Twitter @ansimuz

Support my work at Patreon https://www.patreon.com/ansimuz

Buy my stuff https://ansimuz.itch.io/

Get more Free Assetslike these at: http://www.ansimuz.com


____________________


29 changes: 29 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Geometry Mask Demo</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container">
<div>Press the Space key to switch between examples</div>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
1 change: 1 addition & 0 deletions phaser-3/3.60/geometry-camera-mask/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
103 changes: 103 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import Phaser from './lib/phaser.js';

const ASSET_KEY = 'BG';

class Scene1 extends Phaser.Scene {
/** @type {Phaser.GameObjects.Graphics} */
#g;

constructor() {
super(Scene1.name);
}

preload() {
this.load.image(ASSET_KEY, '/assets/preview.png');
}

create() {
const { width, height } = this.scale;
this.#g = this.add.graphics();
this.#g.fillCircle(width / 2, height / 2, 150);
const mask = this.#g.createGeometryMask();
this.cameras.main.setMask(mask);

this.add.image(0, 0, ASSET_KEY).setOrigin(0).setScale;

this.input.keyboard.once('keydown-SPACE', () => {
this.scene.start(Scene2.name);
});
}

update() {
const p = this.input.activePointer;

this.#g.clear().fillCircle(p.x, p.y, 150);
}
}

class Scene2 extends Phaser.Scene {
constructor() {
super(Scene2.name);
}

preload() {
this.load.image(ASSET_KEY, '/assets/preview.png');
}

create() {
const { width, height } = this.scale;
const g = this.add.graphics();
const rectShape = new Phaser.Geom.Rectangle(0, height / 2, width, 0);
g.fillRectShape(rectShape);
const mask = g.createGeometryMask();
this.cameras.main.setMask(mask);

this.add.image(0, 0, ASSET_KEY).setOrigin(0).setScale;

this.events.once(Phaser.Scenes.Events.CREATE, () => {
this.tweens.add({
onUpdate: () => {
g.clear().fillRectShape(rectShape);
},
delay: 400,
duration: 1500,
height: {
ease: Phaser.Math.Easing.Expo.InOut,
from: 0,
start: 0,
to: height,
},
y: {
ease: Phaser.Math.Easing.Expo.InOut,
from: height / 2,
start: height / 2,
to: 0,
},
targets: rectShape,
onComplete: () => {
mask.destroy();
this.cameras.main.clearMask();

this.input.keyboard.once('keydown-SPACE', () => {
this.scene.start(Scene1.name);
});
},
});
});
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: 1000,
height: 750,
},
};

const game = new Phaser.Game(gameConfig);
game.scene.add(Scene1.name, Scene1);
game.scene.add(Scene2.name, Scene2);
game.scene.start(Scene1.name);
114,610 changes: 114,610 additions & 0 deletions phaser-3/3.60/geometry-camera-mask/src/types/phaser.d.ts

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions phaser-3/3.60/mobile-swipe/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
12 changes: 12 additions & 0 deletions phaser-3/3.60/mobile-swipe/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": [],
"prettier.printWidth": 120
}
13 changes: 13 additions & 0 deletions phaser-3/3.60/mobile-swipe/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Phaser 3 - Mobile Swipe Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in touch events of Phaser 3 to handle swipe gestures! By using the these built in events, you can easily enhance your game to support mobile devices.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/nqLUfoO4TR0/hqdefault.jpg">](https://youtu.be/nqLUfoO4TR0 "Phaser 3 Swipe Wizardry: A Comprehensive Guide to Swipe Gestures in Phaser 3!")

Link to live demo:

[Mobile Swipe Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/mobile-swipe/index.html)
Binary file added phaser-3/3.60/mobile-swipe/docs/example.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions phaser-3/3.60/mobile-swipe/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Mobile Swipe Demo</title>
<style>
html,
body {
margin: 0px;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.60/mobile-swipe/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
1 change: 1 addition & 0 deletions phaser-3/3.60/mobile-swipe/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
71 changes: 71 additions & 0 deletions phaser-3/3.60/mobile-swipe/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import Phaser from './lib/phaser.js';
import { Swipe } from './swipe.js';

class GameScene extends Phaser.Scene {
constructor() {
super(GameScene.name);
}

create() {
const data = [0, 20, 84, 20, 84, 0, 120, 50, 84, 100, 84, 80, 0, 80];
const arrow = this.add
.polygon(this.scale.width / 2, this.scale.height / 2, data, 0x0000ff, 0.5)
.setScale(1.2, 0.8)
.setStrokeStyle(2, 0xffffff);

const swipe = new Swipe(this, {
swipeDetectedCallback: (direction) => {
console.log(direction);
let angle = 0;
switch (direction) {
case 'DOWN':
angle = 90;
break;
case 'UP':
angle = -90;
break;
case 'RIGHT':
angle = 0;
break;
case 'LEFT':
angle = 180;
break;
default:
break;
}
this.add.tween({
targets: arrow,
angle: angle,
ease: Phaser.Math.Easing.Sine.Out,
duration: 500,
});
},
});

this.add
.text(this.scale.width / 2, 550, 'Swipe the screen to move the arrow', {
align: 'center',
fontSize: '22px',
wordWrap: {
width: this.scale.width - 50,
},
})
.setOrigin(0.5);
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: 360,
height: 640,
autoCenter: Phaser.Scale.CENTER_BOTH,
mode: Phaser.Scale.FIT,
},
backgroundColor: '#5c5b5b',
scene: [GameScene],
};

const game = new Phaser.Game(gameConfig);
145 changes: 145 additions & 0 deletions phaser-3/3.60/mobile-swipe/src/swipe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
/**
* @typedef {keyof typeof BASE_DIRECTION} BaseDirection
*/

/** @enum {Direction} */
const BASE_DIRECTION = Object.freeze({
LEFT: 'LEFT',
RIGHT: 'RIGHT',
DOWN: 'DOWN',
UP: 'UP',
});

/**
* @typedef {keyof typeof DIRECTION} Direction
*/

/** @enum {Direction} */
const DIRECTION = Object.freeze({
...BASE_DIRECTION,
NONE: 'NONE',
});

/**
* @callback SwipeDetectedCallback
* @param {Direction} [direction]
* @returns {void}
*/

/**
* @typedef SwipeConfig
* @type {object}
* @property {SwipeDetectedCallback} [swipeDetectedCallback]
*/

export class Swipe {
/** @type {Phaser.Scene} */
#scene;
/** @type {Phaser.Math.Vector2} */
#lastPointerDownLocation;
/** @type {Phaser.Math.Vector2} */
#lastPointerUpLocation;
/** @type {Direction} */
#swipeDirection;
/** @type {SwipeConfig | undefined} */
#config;

/**
* @param {Phaser.Scene} scene
* @param {SwipeConfig} [config]
*/
constructor(scene, config) {
this.#scene = scene;
this.#lastPointerDownLocation = new Phaser.Math.Vector2(0, 0);
this.#lastPointerUpLocation = new Phaser.Math.Vector2(0, 0);
this.#swipeDirection = DIRECTION.NONE;
this.#config = config;
this.#setupEvents();
}

/**
* @returns {void}
*/
#setupEvents() {
document.addEventListener(Phaser.Input.Events.POINTER_DOWN, (/** @type {PointerEvent} */ pointer) => {
console.log(pointer.x, pointer.y);
this.#handlePointerDown(pointer);
});
document.addEventListener(Phaser.Input.Events.POINTER_UP, (/** @type {PointerEvent} */ pointer) => {
console.log(pointer.x, pointer.y);
this.#handlePointerUp(pointer);
});
// this.#scene.input.on(Phaser.Input.Events.POINTER_DOWN, this.#handlePointerDown, this);
// this.#scene.input.on(Phaser.Input.Events.POINTER_UP, this.#handlePointerUp, this);
// this.#scene.events.once(Phaser.Scenes.Events.SHUTDOWN, () => {
// this.#scene.input.off(Phaser.Input.Events.POINTER_DOWN, this.#handlePointerDown, this);
// this.#scene.input.off(Phaser.Input.Events.POINTER_UP, this.#handlePointerUp, this);
// });
}

/**
* @param {PointerEvent} pointer
* @returns {void}
*/
#handlePointerDown(pointer) {
//this.#lastPointerDownLocation = pointer.position.clone();
this.#lastPointerDownLocation = new Phaser.Math.Vector2(pointer.x, pointer.y);
}

/**
* @param {PointerEvent} pointer
* @returns {void}
*/
#handlePointerUp(pointer) {
//this.#lastPointerUpLocation = pointer.position.clone();
this.#lastPointerUpLocation = new Phaser.Math.Vector2(pointer.x, pointer.y);
this.#handleSwipe();
if (this.#swipeDirection !== DIRECTION.NONE && this.#config && this.#config.swipeDetectedCallback) {
this.#config.swipeDetectedCallback(this.#swipeDirection);
}
}

/**
* @returns {void}
*/
#handleSwipe() {
// if the same position is detected, then there is no swipe to calculate
if (
this.#lastPointerDownLocation.x === this.#lastPointerUpLocation.x &&
this.#lastPointerDownLocation.y === this.#lastPointerUpLocation.y
) {
this.#swipeDirection = DIRECTION.NONE;
return;
}

const radians = Phaser.Math.Angle.BetweenPoints(this.#lastPointerDownLocation, this.#lastPointerUpLocation);
const degrees = Phaser.Math.RadToDeg(radians);
const positiveDegrees = Math.abs(degrees);

/**
* For direction, depending on the degrees, we can determine which quadrant the swipe
* direction is in.
* X < 0 = bottom two quadrants, overall direction is down
* X > 0 = top two quadrants, overall direction is up
*
* 0 - 90 is right side, 91 - 180 is left side
*/

if (positiveDegrees <= 45) {
this.#swipeDirection = DIRECTION.RIGHT;
return;
}

if (positiveDegrees >= 135) {
this.#swipeDirection = DIRECTION.LEFT;
return;
}

if (degrees < 0) {
this.#swipeDirection = DIRECTION.UP;
return;
}

this.#swipeDirection = DIRECTION.DOWN;
}
}
114,610 changes: 114,610 additions & 0 deletions phaser-3/3.60/mobile-swipe/src/types/phaser.d.ts

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions phaser-3/3.60/simple-scene-transitions/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
# Phaser 3 - Simple Scene Transitions Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in events of Phaser 3 to know when an animation is completed, that way you can use that event to perform some additional game logic.

For a detailed walkthrough, checkout my video on YouTube here:

TODO
[<img src="https://i.ytimg.com/vi/jZtVciBkxjU/hqdefault.jpg">](https://youtu.be/jZtVciBkxjU "Phaser 3 Mastery: Effortless Fade-In and Fade-Out Scene Transitions")

Link to live demo:
TODO

[Simple Scene Transitions](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/simple-scene-transitions/index.html)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions phaser-3/3.70/draggable-demo/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
11 changes: 11 additions & 0 deletions phaser-3/3.70/draggable-demo/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": ["anims"]
}
17 changes: 17 additions & 0 deletions phaser-3/3.70/draggable-demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Phaser 3 - Animation Completion Event Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in events of Phaser 3 to know when an animation is completed, that way you can use that event to perform some additional game logic.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/W-INH27SjKc/hqdefault.jpg">](https://youtu.be/W-INH27SjKc "Phaser 3 Mastery: How to Listen and React to Animation Completion Events")

Link to live demo:

[Animation Completion Event Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/animation-completion-events/index.html)

## Credit

The spritesheet that was used in this demo were created by [Essssam](https://essssam.itch.io/rocky-roads).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.70/draggable-demo/assets/starfighter/public-license.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Artwork created by Luis Zuno (@ansimuz)


LICENSE:
You may use these assets in personal or commercial projects. You can modify these assets to suit your needs. You can re-distribute the file.
Credit no required but appreciated it.

____________________

LINKS

Twitter @ansimuz

Support my work at Patreon https://www.patreon.com/ansimuz

Buy my stuff https://ansimuz.itch.io/

Get more Free Assetslike these at: http://www.ansimuz.com


____________________


Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added phaser-3/3.70/draggable-demo/docs/example.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.70/draggable-demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Draggable Objects Demo</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.70/draggable-demo/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es2017",
"checkJs": true
}
}
1 change: 1 addition & 0 deletions phaser-3/3.70/draggable-demo/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
38 changes: 38 additions & 0 deletions phaser-3/3.70/draggable-demo/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Phaser from './lib/phaser.js';

export class Game extends Phaser.Scene {
constructor() {
super({ key: 'Game' });
}

create() {
console.log('1');
this.time.delayedCall(0, () => {
console.log('2');
});
console.log('3');
new Promise((resolve) => {
setTimeout(() => {
console.log('5');
resolve();
}, 3);
});
console.log('4');
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: window.innerWidth, //1080,
height: window.innerHeight, //1920,
autoCenter: Phaser.Scale.CENTER_BOTH,
mode: Phaser.Scale.RESIZE,
},
backgroundColor: '#000000',
scene: [Game],
};

const game = new Phaser.Game(gameConfig);
114,610 changes: 114,610 additions & 0 deletions phaser-3/3.70/draggable-demo/src/types/phaser.d.ts

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions phaser-3/3.70/snapshot-demo/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
11 changes: 11 additions & 0 deletions phaser-3/3.70/snapshot-demo/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": ["anims"]
}
17 changes: 17 additions & 0 deletions phaser-3/3.70/snapshot-demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Phaser 3 - Animation Completion Event Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in events of Phaser 3 to know when an animation is completed, that way you can use that event to perform some additional game logic.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/W-INH27SjKc/hqdefault.jpg">](https://youtu.be/W-INH27SjKc "Phaser 3 Mastery: How to Listen and React to Animation Completion Events")

Link to live demo:

[Animation Completion Event Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/animation-completion-events/index.html)

## Credit

The spritesheet that was used in this demo were created by [Essssam](https://essssam.itch.io/rocky-roads).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.70/snapshot-demo/assets/starfighter/public-license.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Artwork created by Luis Zuno (@ansimuz)


LICENSE:
You may use these assets in personal or commercial projects. You can modify these assets to suit your needs. You can re-distribute the file.
Credit no required but appreciated it.

____________________

LINKS

Twitter @ansimuz

Support my work at Patreon https://www.patreon.com/ansimuz

Buy my stuff https://ansimuz.itch.io/

Get more Free Assetslike these at: http://www.ansimuz.com


____________________


Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added phaser-3/3.70/snapshot-demo/docs/example.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.70/snapshot-demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Snapshot Demo</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.70/snapshot-demo/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
1 change: 1 addition & 0 deletions phaser-3/3.70/snapshot-demo/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
64 changes: 64 additions & 0 deletions phaser-3/3.70/snapshot-demo/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import Phaser from './lib/phaser.js';

const ASSETS = {
BACKGROUND: { key: 'BACKGROUND', path: 'background.png' },
SHIP: { key: 'SHIP', path: 'ship-a1.png' },
ROCK: { key: 'ROCK', path: 'big-a.png' },
};

export class Game extends Phaser.Scene {
constructor() {
super({ key: 'Game' });
}

preload() {
this.load.setPath('assets/starfighter');
Object.values(ASSETS).forEach((asset) => {
this.load.image(asset.key, asset.path);
});
}

create() {
this.add
.image(this.scale.width / 2, this.scale.height / 2, ASSETS.BACKGROUND.key, 0)
.setAngle(-90)
.setAlpha(0.7)
.setScale(2.5);
const ship = this.add.image(this.scale.width / 2, this.scale.height - 200, ASSETS.SHIP.key, 0).setScale(3);
ship.setInteractive({
draggable: true,
});
ship.on('drag', (pointer, dragX, dragY) => {
console.log(pointer);
console.log(dragX, dragY);
ship.setPosition(dragX, dragY);
});

const rock = this.add.image(this.scale.width / 2, 150, ASSETS.ROCK.key, 0).setScale(3);

rock.setInteractive({
draggable: true,
});

rock.on('drag', (pointer, x, y) => {
rock.x = x;
rock.y = y;
});
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: window.innerWidth, //1080,
height: window.innerHeight, //1920,
autoCenter: Phaser.Scale.CENTER_BOTH,
mode: Phaser.Scale.RESIZE,
},
backgroundColor: '#000000',
scene: [Game],
};

const game = new Phaser.Game(gameConfig);
114,610 changes: 114,610 additions & 0 deletions phaser-3/3.70/snapshot-demo/src/types/phaser.d.ts

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions phaser-3/3.80/minimap-1-demo/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
12 changes: 12 additions & 0 deletions phaser-3/3.80/minimap-1-demo/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"prettier.printWidth": 120,
"cSpell.words": ["anims"]
}
21 changes: 21 additions & 0 deletions phaser-3/3.80/minimap-1-demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Phaser 3 - Create Minimap Using Phaser 3 Camera Demo

![demo](docs/example.gif)

A quick demo of how you can build a minimap feature in Phaser 3 by using the built in support for multiple cameras, and how we can show and hide game objects on each camera.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/E5R3op1NUnY/hqdefault.jpg">](https://youtu.be/E5R3op1NUnY "Phaser 3 Tutorial: How to create a minimap feature using a Phaser 3 Camera")

Link to live demo:

[Minimap Using Phaser 3 Camera Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/minimap-1-demo/index.html)

## Credit

The art assets used in this demo were created by:

- [finalbossblues](https://finalbossblues.itch.io/openrtp-tiles)
- [oceansdream](https://oceansdream.itch.io/nostalgia-icons1)
- [finalbossblues](https://finalbossblues.com/timefantasy/free-graphics/)
100 changes: 100 additions & 0 deletions phaser-3/3.80/minimap-1-demo/assets/data/animations.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
{
"anims": [
{
"key": "idle",
"type": "frame",
"frames": [
{
"frame": 55
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_down",
"type": "frame",
"frames": [
{
"frame": 54
},
{
"frame": 55
},
{
"frame": 56
},
{
"frame": 55
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_left",
"type": "frame",
"frames": [
{
"frame": 66
},
{
"frame": 67
},
{
"frame": 68
},
{
"frame": 67
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_right",
"type": "frame",
"frames": [
{
"frame": 78
},
{
"frame": 79
},
{
"frame": 80
},
{
"frame": 79
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_up",
"type": "frame",
"frames": [
{
"frame": 90
},
{
"frame": 91
},
{
"frame": 92
},
{
"frame": 91
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
}
]
}
38 changes: 38 additions & 0 deletions phaser-3/3.80/minimap-1-demo/assets/data/assets.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
[
{
"path": "assets/minimap",
"files": [
{
"type": "image",
"key": "background",
"url": "town.png"
},
{
"type": "image",
"key": "map",
"url": "minimap.png"
},
{
"type": "image",
"key": "questIcon",
"url": "tile056.png"
},
{
"type": "spritesheet",
"key": "characters",
"url": "bonus1_full.png",
"frameConfig": { "frameWidth": 26, "frameHeight": 36 }
}
]
},
{
"path": "assets/data",
"files": [
{
"type": "json",
"key": "quests",
"url": "quests.json"
}
]
}
]
7 changes: 7 additions & 0 deletions phaser-3/3.80/minimap-1-demo/assets/data/quests.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
[
{
"id": "quest1",
"x": 568,
"y": 348
}
]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,311 changes: 1,311 additions & 0 deletions phaser-3/3.80/minimap-1-demo/assets/minimap/town.json

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added phaser-3/3.80/minimap-1-demo/docs/example.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.80/minimap-1-demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Minimap 1 Demo</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.80/minimap-1-demo/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
31 changes: 31 additions & 0 deletions phaser-3/3.80/minimap-1-demo/src/components/common/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* @typedef Coordinate
* @type {object}
* @property {number} x the position of this coordinate
* @property {number} y the position of this coordinate
*/

/**
* @typedef {keyof typeof DIRECTION} Direction
*/

/** @enum {Direction} */
export const DIRECTION = Object.freeze({
LEFT: 'LEFT',
RIGHT: 'RIGHT',
UP: 'UP',
DOWN: 'DOWN',
});

/**
* Utility function to ensure we handle the full possible range of types when checking a variable for a possible
* type in a union.
*
* A good example of this is when we check for all of the possible values in a `switch` statement, and we want
* to ensure we check for all possible values in an enum type object.
* @param {never} _value
* @returns {never}
*/
export function exhaustiveGuard(_value) {
throw new Error(`Error! Reached forbidden guard function with unexpected value: ${JSON.stringify(_value)}`);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Phaser from '../../lib/phaser.js';

export const CUSTOM_EVENTS = Object.freeze({
ENEMY_DESTROYED: 'ENEMY_DESTROYED',
PLAYER_DESTROYED: 'PLAYER_DESTROYED',
PLAYER_SPAWN: 'PLAYER_SPAWN',
});

export class EventBusComponent extends Phaser.Events.EventEmitter {
constructor() {
super();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { DIRECTION } from '../common/index.js';

export class InputComponent {
/** @protected @type {boolean} */
_up;
/** @protected @type {boolean} */
_down;
/** @protected @type {boolean} */
_left;
/** @protected @type {boolean} */
_right;

constructor() {
this.reset();
}

/** @type {boolean} */
get leftIsDown() {
return this._left;
}

/** @type {boolean} */
get rightIsDown() {
return this._right;
}

/** @type {boolean} */
get downIsDown() {
return this._down;
}

/** @type {boolean} */
get upIsDown() {
return this._up;
}

/** @type {import("../common/index").Direction | undefined} */
get directionKeyPressed() {
if (this._left) {
return DIRECTION.LEFT;
}
if (this._right) {
return DIRECTION.RIGHT;
}
if (this._up) {
return DIRECTION.UP;
}
if (this._down) {
return DIRECTION.DOWN;
}
return undefined;
}

/**
* @returns {void}
*/
reset() {
this._up = false;
this._down = false;
this._right = false;
this._left = false;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import Phaser from '../../lib/phaser.js';
import { InputComponent } from './input-component.js';

export class KeyboardInputComponent extends InputComponent {
/** @type {Phaser.Types.Input.Keyboard.CursorKeys | undefined} */
#cursorKeys;

/**
* @param {Phaser.Scene} scene
*/
constructor(scene) {
super();

if (!scene.input.keyboard === undefined) {
console.log('Phaser Keyboard Plugin is not enabled, KeyboardInputComponent will not work properly');
return;
}
this.#cursorKeys = scene.input.keyboard.createCursorKeys();

// handle automatic call to update
scene.events.on(Phaser.Scenes.Events.UPDATE, this.update, this);
scene.events.once(
Phaser.Scenes.Events.SHUTDOWN,
() => {
scene.events.off(Phaser.Scenes.Events.UPDATE, this.update, this);
},
this
);
}

/**
* @returns {void}
*/
update() {
if (this.#cursorKeys === undefined) {
return;
}
this._up = this.#cursorKeys.up.isDown || false;
this._down = this.#cursorKeys.down.isDown || false;
this._left = this.#cursorKeys.left.isDown || false;
this._right = this.#cursorKeys.right.isDown || false;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import Phaser from '../../lib/phaser.js';
import { GridMovementComponent } from './grid-movement-component.js';

/**
* @typedef IdleFrameConfig
* @type {object}
* @property {number} LEFT
* @property {number} RIGHT
* @property {number} UP
* @property {number} DOWN
*/

/**
* @typedef MovementAnimationConfig
* @type {object}
* @property {string} LEFT
* @property {string} RIGHT
* @property {string} UP
* @property {string} DOWN
*/

/**
* @typedef GridMovementAnimationComponentConfig
* @type {object}
* @property {GridMovementComponent} gridMovementComponent
* @property {Phaser.GameObjects.Sprite} phaserGameObject
* @property {IdleFrameConfig} idleFrameConfig
* @property {MovementAnimationConfig} movementAnimationConfig
*/

export class GridMovementAnimationComponent {
/** @type {Phaser.Scene} */
#scene;
/** @type {Phaser.GameObjects.Sprite} */
#phaserGameObject;
/** @type {GridMovementComponent} */
#gridMovementComponent;
/** @type {IdleFrameConfig} */
#idleFrameConfig;
/** @type {MovementAnimationConfig} */
#movementAnimationConfig;

/**
* @param {GridMovementAnimationComponentConfig} config
*/
constructor(config) {
this.#scene = config.phaserGameObject.scene;
this.#gridMovementComponent = config.gridMovementComponent;
this.#phaserGameObject = config.phaserGameObject;
this.#idleFrameConfig = config.idleFrameConfig;
this.#movementAnimationConfig = config.movementAnimationConfig;

// handle automatic call to update
this.#scene.events.on(Phaser.Scenes.Events.PRE_RENDER, this.update, this);
this.#scene.events.once(
Phaser.Scenes.Events.SHUTDOWN,
() => {
this.#scene.events.off(Phaser.Scenes.Events.PRE_RENDER, this.update, this);
},
this
);
}

/**
* @returns {void}
*/
update() {
if (this.#phaserGameObject === undefined || this.#phaserGameObject.anims === undefined) {
return;
}

if (this.#gridMovementComponent.isMoving) {
// check to see if we need to play an animation
if (
!this.#phaserGameObject.anims.isPlaying ||
this.#phaserGameObject.anims.currentAnim?.key !==
this.#movementAnimationConfig[this.#gridMovementComponent.direction]
) {
this.#phaserGameObject.play(this.#movementAnimationConfig[this.#gridMovementComponent.direction]);
}
return;
}

// stop the animation if needed
if (this.#phaserGameObject.anims.isPlaying) {
this.#phaserGameObject.stop();
}

// update idle frame if needed
if (
this.#phaserGameObject.frame.name.toString() !==
this.#idleFrameConfig[this.#gridMovementComponent.direction].toString()
) {
this.#phaserGameObject.setFrame(this.#idleFrameConfig[this.#gridMovementComponent.direction]);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import Phaser from '../../lib/phaser.js';
import { EventBusComponent } from '../events/event-bus-component.js';
import { InputComponent } from '../input/input-component.js';
import { getTargetPositionFromGameObjectPositionAndDirection } from './grid-utils.js';

/**
* @typedef GridMovementComponentConfig
* @type {object}
* @property {InputComponent} inputComponent
* @property {EventBusComponent} eventBusComponent
* @property {import('../common/index.js').Direction} currentDirection
* @property {Phaser.GameObjects.Sprite} phaserGameObject
* @property {number} gridTileSize
*/

export const GRID_MOVEMENT_EVENTS = Object.freeze({
INPUT_STOPPED: 'INPUT_STOPPED',
CHANGED_DIRECTION: 'CHANGED_DIRECTION',
GRID_MOVEMENT_STARTED: 'GRID_MOVEMENT_STARTED',
GRID_MOVEMENT_FINISHED: 'GRID_MOVEMENT_FINISHED',
});

export class GridMovementComponent {
/** @type {Phaser.Scene} */
#scene;
/** @type {Phaser.GameObjects.Sprite} */
#phaserGameObject;
/** @type {EventBusComponent} */
#eventBusComponent;
/** @type {InputComponent} */
#inputComponent;
/** @type {import('../common/index.js').Direction} */
#direction;
/** @type {boolean} */
#isMoving;
/** @type {boolean} */
#startedMoving;
/** @type {import('../common/index.js').Coordinate} */
#targetPosition;
/** @type {import('../common/index.js').Coordinate} */
#previousTargetPosition;
/** @type {number} */
#gridTileSize;

/**
* @param {GridMovementComponentConfig} config
*/
constructor(config) {
this.#scene = config.phaserGameObject.scene;
this.#phaserGameObject = config.phaserGameObject;
this.#inputComponent = config.inputComponent;
this.#eventBusComponent = config.eventBusComponent;
this.#direction = config.currentDirection;
this.#isMoving = false;
this.#startedMoving = false;
/** @type {import('../common/index.js').Coordinate} */
const currentPosition = {
x: this.#phaserGameObject.x,
y: this.#phaserGameObject.y,
};
this.#previousTargetPosition = { ...currentPosition };
this.#targetPosition = { ...currentPosition };
this.#gridTileSize = config.gridTileSize;

// handle automatic call to update
this.#scene.events.on(Phaser.Scenes.Events.UPDATE, this.update, this);
this.#scene.events.once(
Phaser.Scenes.Events.SHUTDOWN,
() => {
this.#scene.events.off(Phaser.Scenes.Events.UPDATE, this.update, this);
},
this
);
}

/** @type {boolean} */
get isMoving() {
return this.#isMoving;
}

/** @type {import('../common/index.js').Direction} */
get direction() {
return this.#direction;
}

/**
* @returns {void}
*/
update() {
if (this.isMoving) {
return;
}

const directionKeyPressed = this.#inputComponent.directionKeyPressed;
if (directionKeyPressed === undefined) {
if (this.#startedMoving) {
// fire event so we can stop animations since there is no input
this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.INPUT_STOPPED, this.#direction);
this.#startedMoving = false;
}
return;
}
const changedDirection = this.#direction !== this.#inputComponent.directionKeyPressed;
this.#direction = directionKeyPressed;

if (changedDirection) {
this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.CHANGED_DIRECTION, this.#direction);
}

this.#isMoving = true;
this.#startedMoving = true;
const updatedPosition = getTargetPositionFromGameObjectPositionAndDirection(
this.#targetPosition,
this.#direction,
this.#gridTileSize
);
this.#previousTargetPosition = { ...this.#targetPosition };
this.#targetPosition.x = updatedPosition.x;
this.#targetPosition.y = updatedPosition.y;

this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_STARTED, this.#direction);
this.#phaserGameObject.scene.add.tween({
delay: 0,
duration: 300,
y: {
from: this.#phaserGameObject.y,
start: this.#phaserGameObject.y,
to: this.#targetPosition.y,
},
x: {
from: this.#phaserGameObject.x,
start: this.#phaserGameObject.x,
to: this.#targetPosition.x,
},
targets: this.#phaserGameObject,
onComplete: () => {
this.#isMoving = false;
this.#previousTargetPosition = { ...this.#targetPosition };
this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_FINISHED, {
direction: this.#direction,
x: this.#phaserGameObject.x,
y: this.#phaserGameObject.y,
});
},
});
}
}
29 changes: 29 additions & 0 deletions phaser-3/3.80/minimap-1-demo/src/components/movement/grid-utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { DIRECTION, exhaustiveGuard } from '../common/index.js';

/**
* @param {import('../common/index').Coordinate} currentPosition
* @param {import('../common/index').Direction} direction
* @param {number} tileSize
* @returns {import('../common/index').Coordinate}
*/
export function getTargetPositionFromGameObjectPositionAndDirection(currentPosition, direction, tileSize) {
/** @type {import('../common/index').Coordinate} */
const targetPosition = { ...currentPosition };
switch (direction) {
case DIRECTION.DOWN:
targetPosition.y += tileSize;
break;
case DIRECTION.UP:
targetPosition.y -= tileSize;
break;
case DIRECTION.LEFT:
targetPosition.x -= tileSize;
break;
case DIRECTION.RIGHT:
targetPosition.x += tileSize;
break;
default:
exhaustiveGuard(direction);
}
return targetPosition;
}
107 changes: 107 additions & 0 deletions phaser-3/3.80/minimap-1-demo/src/game-scene.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import Phaser from './lib/phaser.js';
import { DIRECTION } from './components/common/index.js';
import { EventBusComponent } from './components/events/event-bus-component.js';
import { KeyboardInputComponent } from './components/input/keyboard-input-component.js';
import { GridMovementAnimationComponent } from './components/movement/grid-movement-animation-component.js';
import { GRID_MOVEMENT_EVENTS, GridMovementComponent } from './components/movement/grid-movement-component.js';

const SCALE_FACTOR = 2;

export class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' });
}

preload() {
this.load.pack('assetPack', 'assets/data/assets.json');
this.load.animation('gemData', 'assets/data/animations.json');
}

create() {
const mainBg = this.add.image(0, 0, 'background').setOrigin(0).setScale(2);
const player = this.add
.sprite(220 * SCALE_FACTOR, 220 * SCALE_FACTOR, 'characters', 55)
.setOrigin(0)
.setScale(SCALE_FACTOR)
.setName('player')
.play('walk_down');
this.cameras.main.setBounds(0, 0, this.scale.width * SCALE_FACTOR, this.scale.height * SCALE_FACTOR);
this.cameras.main.startFollow(player);
const playerEventBusComponent = new EventBusComponent();
const keyboardInputComponent = new KeyboardInputComponent(this);
const gridMovementComponent = new GridMovementComponent({
inputComponent: keyboardInputComponent,
currentDirection: DIRECTION.DOWN,
phaserGameObject: player,
gridTileSize: 32,
eventBusComponent: playerEventBusComponent,
});
new GridMovementAnimationComponent({
gridMovementComponent,
phaserGameObject: player,
idleFrameConfig: {
DOWN: 55,
LEFT: 67,
RIGHT: 79,
UP: 91,
},
movementAnimationConfig: {
DOWN: 'walk_down',
LEFT: 'walk_left',
RIGHT: 'walk_right',
UP: 'walk_up',
},
});

// Example of how to listen for movement events from player game object
// playerEventBusComponent.on(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_FINISHED, () => {
// console.log(player.x, player.y)
// });

// Example of how to get JSON data from cache
// console.log(this.cache.json.get('quests'));

/* start of code for camera minimap */
// create a new background image that we will apply special effects to, this image will not be shown on the main camera
const mapBg = this.add.image(0, 0, 'background').setOrigin(0).setScale(2);
mapBg.postFX.addColorMatrix().grayscale(0.8);
// create a 2nd camera that will be a zoomed out version of the main camera (birds eye view)
const minimapCamera = this.cameras
.add(
this.scale.width - 230,
10,
this.scale.width * SCALE_FACTOR,
this.scale.height * SCALE_FACTOR,
false,
'minimap'
)
.setOrigin(0)
.setZoom(0.16);
// ignore any game objects we don't want visible on the 2nd camera
minimapCamera.ignore([player, mainBg]);

// create icons for map
const playerIcon = this.add.circle(player.x, player.y, 20, 0xff0000, 1).setOrigin(0, -1);
playerEventBusComponent.on(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_FINISHED, () => {
playerIcon.setPosition(player.x, player.y);
});
this.cameras.main.ignore([playerIcon, mapBg]);
const questIcons = [];
this.cache.json.get('quests').forEach((quest) => {
console.log(quest);
const icon = this.add.image(quest.x, quest.y, 'questIcon').setScale(2.5).setOrigin(0);
questIcons.push(icon);
});
this.cameras.main.ignore(questIcons);

/* end of code for camera minimap */

// temp code to allow removal of quests
const qKey = this.input.keyboard.addKey('q');
qKey.once(Phaser.Input.Keyboard.Events.DOWN, () => {
questIcons.forEach((quest) => {
quest.destroy();
});
});
}
}
1 change: 1 addition & 0 deletions phaser-3/3.80/minimap-1-demo/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
18 changes: 18 additions & 0 deletions phaser-3/3.80/minimap-1-demo/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Phaser from './lib/phaser.js';
import { GameScene } from './game-scene.js';

const gameConfig = {
type: Phaser.WEBGL,
pixelArt: true,
scale: {
parent: 'game-container',
width: 688,
height: 544,
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
backgroundColor: '#5c5b5b',
scene: [GameScene],
};

const game = new Phaser.Game(gameConfig);
116,274 changes: 116,274 additions & 0 deletions phaser-3/3.80/minimap-1-demo/src/types/phaser.d.ts

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions phaser-3/3.80/minimap-2-demo/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
12 changes: 12 additions & 0 deletions phaser-3/3.80/minimap-2-demo/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"prettier.printWidth": 120,
"cSpell.words": ["anims"]
}
17 changes: 17 additions & 0 deletions phaser-3/3.80/minimap-2-demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Phaser 3 - Animation Completion Event Demo

![demo](docs/example.gif)

A quick demo of how you can use the built in events of Phaser 3 to know when an animation is completed, that way you can use that event to perform some additional game logic.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/W-INH27SjKc/hqdefault.jpg">](https://youtu.be/W-INH27SjKc "Phaser 3 Mastery: How to Listen and React to Animation Completion Events")

Link to live demo:

[Animation Completion Event Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/animation-completion-events/index.html)

## Credit

The spritesheet that was used in this demo were created by [Essssam](https://essssam.itch.io/rocky-roads).
100 changes: 100 additions & 0 deletions phaser-3/3.80/minimap-2-demo/assets/data/animations.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
{
"anims": [
{
"key": "idle",
"type": "frame",
"frames": [
{
"frame": 55
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_down",
"type": "frame",
"frames": [
{
"frame": 54
},
{
"frame": 55
},
{
"frame": 56
},
{
"frame": 55
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_left",
"type": "frame",
"frames": [
{
"frame": 66
},
{
"frame": 67
},
{
"frame": 68
},
{
"frame": 67
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_right",
"type": "frame",
"frames": [
{
"frame": 78
},
{
"frame": 79
},
{
"frame": 80
},
{
"frame": 79
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
},
{
"key": "walk_up",
"type": "frame",
"frames": [
{
"frame": 90
},
{
"frame": 91
},
{
"frame": 92
},
{
"frame": 91
}
],
"defaultTextureKey": "characters",
"frameRate": 6,
"repeat": -1
}
]
}
38 changes: 38 additions & 0 deletions phaser-3/3.80/minimap-2-demo/assets/data/assets.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
[
{
"path": "assets/minimap",
"files": [
{
"type": "image",
"key": "background",
"url": "town.png"
},
{
"type": "image",
"key": "map",
"url": "minimap.png"
},
{
"type": "image",
"key": "questIcon",
"url": "tile056.png"
},
{
"type": "spritesheet",
"key": "characters",
"url": "bonus1_full.png",
"frameConfig": { "frameWidth": 26, "frameHeight": 36 }
}
]
},
{
"path": "assets/data",
"files": [
{
"type": "json",
"key": "quests",
"url": "quests.json"
}
]
}
]
7 changes: 7 additions & 0 deletions phaser-3/3.80/minimap-2-demo/assets/data/quests.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
[
{
"id": "quest1",
"x": 568,
"y": 348
}
]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,311 changes: 1,311 additions & 0 deletions phaser-3/3.80/minimap-2-demo/assets/minimap/town.json

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added phaser-3/3.80/minimap-2-demo/docs/example.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions phaser-3/3.80/minimap-2-demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Minimap 1 Demo</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.80/minimap-2-demo/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
31 changes: 31 additions & 0 deletions phaser-3/3.80/minimap-2-demo/src/components/common/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* @typedef Coordinate
* @type {object}
* @property {number} x the position of this coordinate
* @property {number} y the position of this coordinate
*/

/**
* @typedef {keyof typeof DIRECTION} Direction
*/

/** @enum {Direction} */
export const DIRECTION = Object.freeze({
LEFT: 'LEFT',
RIGHT: 'RIGHT',
UP: 'UP',
DOWN: 'DOWN',
});

/**
* Utility function to ensure we handle the full possible range of types when checking a variable for a possible
* type in a union.
*
* A good example of this is when we check for all of the possible values in a `switch` statement, and we want
* to ensure we check for all possible values in an enum type object.
* @param {never} _value
* @returns {never}
*/
export function exhaustiveGuard(_value) {
throw new Error(`Error! Reached forbidden guard function with unexpected value: ${JSON.stringify(_value)}`);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Phaser from '../../lib/phaser.js';

export const CUSTOM_EVENTS = Object.freeze({
ENEMY_DESTROYED: 'ENEMY_DESTROYED',
PLAYER_DESTROYED: 'PLAYER_DESTROYED',
PLAYER_SPAWN: 'PLAYER_SPAWN',
});

export class EventBusComponent extends Phaser.Events.EventEmitter {
constructor() {
super();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { DIRECTION } from '../common/index.js';

export class InputComponent {
/** @protected @type {boolean} */
_up;
/** @protected @type {boolean} */
_down;
/** @protected @type {boolean} */
_left;
/** @protected @type {boolean} */
_right;

constructor() {
this.reset();
}

/** @type {boolean} */
get leftIsDown() {
return this._left;
}

/** @type {boolean} */
get rightIsDown() {
return this._right;
}

/** @type {boolean} */
get downIsDown() {
return this._down;
}

/** @type {boolean} */
get upIsDown() {
return this._up;
}

/** @type {import("../common/index").Direction | undefined} */
get directionKeyPressed() {
if (this._left) {
return DIRECTION.LEFT;
}
if (this._right) {
return DIRECTION.RIGHT;
}
if (this._up) {
return DIRECTION.UP;
}
if (this._down) {
return DIRECTION.DOWN;
}
return undefined;
}

/**
* @returns {void}
*/
reset() {
this._up = false;
this._down = false;
this._right = false;
this._left = false;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import Phaser from '../../lib/phaser.js';
import { InputComponent } from './input-component.js';

export class KeyboardInputComponent extends InputComponent {
/** @type {Phaser.Types.Input.Keyboard.CursorKeys | undefined} */
#cursorKeys;

/**
* @param {Phaser.Scene} scene
*/
constructor(scene) {
super();

if (!scene.input.keyboard === undefined) {
console.log('Phaser Keyboard Plugin is not enabled, KeyboardInputComponent will not work properly');
return;
}
this.#cursorKeys = scene.input.keyboard.createCursorKeys();

// handle automatic call to update
scene.events.on(Phaser.Scenes.Events.UPDATE, this.update, this);
scene.events.once(
Phaser.Scenes.Events.SHUTDOWN,
() => {
scene.events.off(Phaser.Scenes.Events.UPDATE, this.update, this);
},
this
);
}

/**
* @returns {void}
*/
update() {
if (this.#cursorKeys === undefined) {
return;
}
this._up = this.#cursorKeys.up.isDown || false;
this._down = this.#cursorKeys.down.isDown || false;
this._left = this.#cursorKeys.left.isDown || false;
this._right = this.#cursorKeys.right.isDown || false;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import Phaser from '../../lib/phaser.js';
import { GridMovementComponent } from './grid-movement-component.js';

/**
* @typedef IdleFrameConfig
* @type {object}
* @property {number} LEFT
* @property {number} RIGHT
* @property {number} UP
* @property {number} DOWN
*/

/**
* @typedef MovementAnimationConfig
* @type {object}
* @property {string} LEFT
* @property {string} RIGHT
* @property {string} UP
* @property {string} DOWN
*/

/**
* @typedef GridMovementAnimationComponentConfig
* @type {object}
* @property {GridMovementComponent} gridMovementComponent
* @property {Phaser.GameObjects.Sprite} phaserGameObject
* @property {IdleFrameConfig} idleFrameConfig
* @property {MovementAnimationConfig} movementAnimationConfig
*/

export class GridMovementAnimationComponent {
/** @type {Phaser.Scene} */
#scene;
/** @type {Phaser.GameObjects.Sprite} */
#phaserGameObject;
/** @type {GridMovementComponent} */
#gridMovementComponent;
/** @type {IdleFrameConfig} */
#idleFrameConfig;
/** @type {MovementAnimationConfig} */
#movementAnimationConfig;

/**
* @param {GridMovementAnimationComponentConfig} config
*/
constructor(config) {
this.#scene = config.phaserGameObject.scene;
this.#gridMovementComponent = config.gridMovementComponent;
this.#phaserGameObject = config.phaserGameObject;
this.#idleFrameConfig = config.idleFrameConfig;
this.#movementAnimationConfig = config.movementAnimationConfig;

// handle automatic call to update
this.#scene.events.on(Phaser.Scenes.Events.PRE_RENDER, this.update, this);
this.#scene.events.once(
Phaser.Scenes.Events.SHUTDOWN,
() => {
this.#scene.events.off(Phaser.Scenes.Events.PRE_RENDER, this.update, this);
},
this
);
}

/**
* @returns {void}
*/
update() {
if (this.#phaserGameObject === undefined || this.#phaserGameObject.anims === undefined) {
return;
}

if (this.#gridMovementComponent.isMoving) {
// check to see if we need to play an animation
if (
!this.#phaserGameObject.anims.isPlaying ||
this.#phaserGameObject.anims.currentAnim?.key !==
this.#movementAnimationConfig[this.#gridMovementComponent.direction]
) {
this.#phaserGameObject.play(this.#movementAnimationConfig[this.#gridMovementComponent.direction]);
}
return;
}

// stop the animation if needed
if (this.#phaserGameObject.anims.isPlaying) {
this.#phaserGameObject.stop();
}

// update idle frame if needed
if (
this.#phaserGameObject.frame.name.toString() !==
this.#idleFrameConfig[this.#gridMovementComponent.direction].toString()
) {
this.#phaserGameObject.setFrame(this.#idleFrameConfig[this.#gridMovementComponent.direction]);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import Phaser from '../../lib/phaser.js';
import { EventBusComponent } from '../events/event-bus-component.js';
import { InputComponent } from '../input/input-component.js';
import { getTargetPositionFromGameObjectPositionAndDirection } from './grid-utils.js';

/**
* @typedef GridMovementComponentConfig
* @type {object}
* @property {InputComponent} inputComponent
* @property {EventBusComponent} eventBusComponent
* @property {import('../common/index.js').Direction} currentDirection
* @property {Phaser.GameObjects.Sprite} phaserGameObject
* @property {number} gridTileSize
*/

export const GRID_MOVEMENT_EVENTS = Object.freeze({
INPUT_STOPPED: 'INPUT_STOPPED',
CHANGED_DIRECTION: 'CHANGED_DIRECTION',
GRID_MOVEMENT_STARTED: 'GRID_MOVEMENT_STARTED',
GRID_MOVEMENT_FINISHED: 'GRID_MOVEMENT_FINISHED',
});

export class GridMovementComponent {
/** @type {Phaser.Scene} */
#scene;
/** @type {Phaser.GameObjects.Sprite} */
#phaserGameObject;
/** @type {EventBusComponent} */
#eventBusComponent;
/** @type {InputComponent} */
#inputComponent;
/** @type {import('../common/index.js').Direction} */
#direction;
/** @type {boolean} */
#isMoving;
/** @type {boolean} */
#startedMoving;
/** @type {import('../common/index.js').Coordinate} */
#targetPosition;
/** @type {import('../common/index.js').Coordinate} */
#previousTargetPosition;
/** @type {number} */
#gridTileSize;

/**
* @param {GridMovementComponentConfig} config
*/
constructor(config) {
this.#scene = config.phaserGameObject.scene;
this.#phaserGameObject = config.phaserGameObject;
this.#inputComponent = config.inputComponent;
this.#eventBusComponent = config.eventBusComponent;
this.#direction = config.currentDirection;
this.#isMoving = false;
this.#startedMoving = false;
/** @type {import('../common/index.js').Coordinate} */
const currentPosition = {
x: this.#phaserGameObject.x,
y: this.#phaserGameObject.y,
};
this.#previousTargetPosition = { ...currentPosition };
this.#targetPosition = { ...currentPosition };
this.#gridTileSize = config.gridTileSize;

// handle automatic call to update
this.#scene.events.on(Phaser.Scenes.Events.UPDATE, this.update, this);
this.#scene.events.once(
Phaser.Scenes.Events.SHUTDOWN,
() => {
this.#scene.events.off(Phaser.Scenes.Events.UPDATE, this.update, this);
},
this
);
}

/** @type {boolean} */
get isMoving() {
return this.#isMoving;
}

/** @type {import('../common/index.js').Direction} */
get direction() {
return this.#direction;
}

/**
* @returns {void}
*/
update() {
if (this.isMoving) {
return;
}

const directionKeyPressed = this.#inputComponent.directionKeyPressed;
if (directionKeyPressed === undefined) {
if (this.#startedMoving) {
// fire event so we can stop animations since there is no input
this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.INPUT_STOPPED, this.#direction);
this.#startedMoving = false;
}
return;
}
const changedDirection = this.#direction !== this.#inputComponent.directionKeyPressed;
this.#direction = directionKeyPressed;

if (changedDirection) {
this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.CHANGED_DIRECTION, this.#direction);
}

this.#isMoving = true;
this.#startedMoving = true;
const updatedPosition = getTargetPositionFromGameObjectPositionAndDirection(
this.#targetPosition,
this.#direction,
this.#gridTileSize
);
this.#previousTargetPosition = { ...this.#targetPosition };
this.#targetPosition.x = updatedPosition.x;
this.#targetPosition.y = updatedPosition.y;

this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_STARTED, this.#direction);
this.#phaserGameObject.scene.add.tween({
delay: 0,
duration: 300,
y: {
from: this.#phaserGameObject.y,
start: this.#phaserGameObject.y,
to: this.#targetPosition.y,
},
x: {
from: this.#phaserGameObject.x,
start: this.#phaserGameObject.x,
to: this.#targetPosition.x,
},
targets: this.#phaserGameObject,
onComplete: () => {
this.#isMoving = false;
this.#previousTargetPosition = { ...this.#targetPosition };
this.#eventBusComponent.emit(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_FINISHED, {
direction: this.#direction,
x: this.#phaserGameObject.x,
y: this.#phaserGameObject.y,
});
},
});
}
}
29 changes: 29 additions & 0 deletions phaser-3/3.80/minimap-2-demo/src/components/movement/grid-utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { DIRECTION, exhaustiveGuard } from '../common/index.js';

/**
* @param {import('../common/index').Coordinate} currentPosition
* @param {import('../common/index').Direction} direction
* @param {number} tileSize
* @returns {import('../common/index').Coordinate}
*/
export function getTargetPositionFromGameObjectPositionAndDirection(currentPosition, direction, tileSize) {
/** @type {import('../common/index').Coordinate} */
const targetPosition = { ...currentPosition };
switch (direction) {
case DIRECTION.DOWN:
targetPosition.y += tileSize;
break;
case DIRECTION.UP:
targetPosition.y -= tileSize;
break;
case DIRECTION.LEFT:
targetPosition.x -= tileSize;
break;
case DIRECTION.RIGHT:
targetPosition.x += tileSize;
break;
default:
exhaustiveGuard(direction);
}
return targetPosition;
}
105 changes: 105 additions & 0 deletions phaser-3/3.80/minimap-2-demo/src/game-scene.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import Phaser from './lib/phaser.js';
import { DIRECTION } from './components/common/index.js';
import { EventBusComponent } from './components/events/event-bus-component.js';
import { KeyboardInputComponent } from './components/input/keyboard-input-component.js';
import { GridMovementAnimationComponent } from './components/movement/grid-movement-animation-component.js';
import { GRID_MOVEMENT_EVENTS, GridMovementComponent } from './components/movement/grid-movement-component.js';
import { MAP_ICON_TYPE, MiniMapScene } from './minimap-scene.js';

const SCALE_FACTOR = 2;

export class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' });
}

preload() {
this.load.pack('assetPack', 'assets/data/assets.json');
this.load.animation('gemData', 'assets/data/animations.json');
}

create() {
const mainBg = this.add.image(0, 0, 'background').setOrigin(0).setScale(2);
const player = this.add
.sprite(220 * SCALE_FACTOR, 220 * SCALE_FACTOR, 'characters', 55)
.setOrigin(0)
.setScale(SCALE_FACTOR)
.setName('player')
.play('walk_down');
this.cameras.main.setBounds(0, 0, this.scale.width * SCALE_FACTOR, this.scale.height * SCALE_FACTOR);
this.cameras.main.startFollow(player);
const playerEventBusComponent = new EventBusComponent();
const keyboardInputComponent = new KeyboardInputComponent(this);
const gridMovementComponent = new GridMovementComponent({
inputComponent: keyboardInputComponent,
currentDirection: DIRECTION.DOWN,
phaserGameObject: player,
gridTileSize: 32,
eventBusComponent: playerEventBusComponent,
});
new GridMovementAnimationComponent({
gridMovementComponent,
phaserGameObject: player,
idleFrameConfig: {
DOWN: 55,
LEFT: 67,
RIGHT: 79,
UP: 91,
},
movementAnimationConfig: {
DOWN: 'walk_down',
LEFT: 'walk_left',
RIGHT: 'walk_right',
UP: 'walk_up',
},
});

// Example of how to listen for movement events from player game object
// playerEventBusComponent.on(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_FINISHED, () => {
// console.log(player.x, player.y)
// });

/* start of code for minimap */
/** @type {import('./minimap-scene.js').MiniMapSceneInitData} */
const dataToPass = {
mapIcons: [
{
x: player.x,
y: player.y,
iconType: MAP_ICON_TYPE.PLAYER,
id: 'player',
},
{
x: 568,
y: 348,
iconType: MAP_ICON_TYPE.QUEST,
id: 'quest1',
},
],
worldHeight: this.scale.height * SCALE_FACTOR,
worldWidth: this.scale.width * SCALE_FACTOR,
};
this.scene.launch('MiniMapScene', dataToPass);
/** @type {MiniMapScene} */
// @ts-ignore
const miniMapScene = this.scene.get('MiniMapScene');

playerEventBusComponent.on(GRID_MOVEMENT_EVENTS.GRID_MOVEMENT_FINISHED, () => {
miniMapScene.updateIconPosition('player', player.x, player.y);
});

const mKey = this.input.keyboard.addKey('m');
if (mKey) {
mKey.on(Phaser.Input.Keyboard.Events.DOWN, () => {
miniMapScene.toggleMap();
});
}
const qKey = this.input.keyboard.addKey('q');
if (qKey) {
qKey.once(Phaser.Input.Keyboard.Events.DOWN, () => {
miniMapScene.removeIcon('quest1');
});
}
/* end of code for minimap */
}
}
1 change: 1 addition & 0 deletions phaser-3/3.80/minimap-2-demo/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
19 changes: 19 additions & 0 deletions phaser-3/3.80/minimap-2-demo/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Phaser from './lib/phaser.js';
import { GameScene } from './game-scene.js';
import { MiniMapScene } from './minimap-scene.js';

const gameConfig = {
type: Phaser.WEBGL,
pixelArt: true,
scale: {
parent: 'game-container',
width: 688,
height: 544,
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
backgroundColor: '#5c5b5b',
scene: [GameScene, MiniMapScene],
};

const game = new Phaser.Game(gameConfig);
146 changes: 146 additions & 0 deletions phaser-3/3.80/minimap-2-demo/src/minimap-scene.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
/**
* @typedef {keyof typeof MAP_ICON_TYPE} MapIconType
*/

/**
* @typedef MapIcon
* @type {object}
* @property {string} id
* @property {MapIconType} iconType
* @property {number} x
* @property {number} y
*/

/**
* @typedef MiniMapSceneInitData
* @type {object}
* @property {MapIcon[]} mapIcons
* @property {number} worldWidth
* @property {number} worldHeight
*/

export const MAP_ICON_TYPE = Object.freeze({
PLAYER: 'PLAYER',
QUEST: 'QUEST',
});

export class MiniMapScene extends Phaser.Scene {
/** @type {{[key: string]: MapIcon}} */
#mapIcons;
/** @type {{[key: string]: Phaser.GameObjects.Image | Phaser.GameObjects.Shape}} */
#mapIconGameObjects;
/** @type {Phaser.GameObjects.Container} */
#mapContainer;
/** @type {number} */
#miniMapWidth;
/** @type {number} */
#miniMapHeight;
/** @type {number} */
#worldWidth;
/** @type {number} */
#worldHeight;

constructor() {
super({ key: 'MiniMapScene' });
}

/**
* @param {MiniMapSceneInitData} data
* @returns {void}
*/
init(data) {
this.#mapIcons = {};
data.mapIcons.forEach((icon) => {
this.#mapIcons[icon.id] = icon;
});
this.#worldHeight = data.worldHeight;
this.#worldWidth = data.worldWidth;
}

/**
* @returns {void}
*/
create() {
const mapImage = this.add.image(0, 0, 'map').setScale(0.25).setOrigin(0);
const mapBackground = this.add
.rectangle(0, 0, mapImage.displayWidth, mapImage.displayHeight, 0x000000)
.setOrigin(0);
this.#miniMapHeight = mapImage.displayHeight;
this.#miniMapWidth = mapImage.displayWidth;

this.#mapContainer = this.add.container(this.scale.width - this.#miniMapWidth - 10, 10, []).setDepth(2);
this.#mapContainer.add([mapBackground, mapImage]);

this.#createMapIcons();
}

/**
* @returns {void}
*/
toggleMap() {
this.#mapContainer.setVisible(!this.#mapContainer.visible);
}

/**
* @param {string} iconId
* @param {number} worldX
* @param {number} worldY
* @returns {void}
*/
updateIconPosition(iconId, worldX, worldY) {
if (this.#mapIconGameObjects[iconId] === undefined) {
return;
}

const iconPosition = this.#calculateIconPosition(worldX, worldY);
this.#mapIconGameObjects[iconId].setPosition(iconPosition.x, iconPosition.y);
}

/**
* @param {string} iconId
* @returns {void}
*/
removeIcon(iconId) {
delete this.#mapIcons[iconId];
if (this.#mapIconGameObjects[iconId] === undefined) {
return;
}
this.#mapIconGameObjects[iconId].destroy();
delete this.#mapIconGameObjects[iconId];
}

/**
* @returns {void}
*/
#createMapIcons() {
this.#mapIconGameObjects = {};
Object.keys(this.#mapIcons).forEach((key) => {
const mapIcon = this.#mapIcons[key];
const iconPosition = this.#calculateIconPosition(mapIcon.x, mapIcon.y);
/** @type {Phaser.GameObjects.Shape | Phaser.GameObjects.Image} */
let gameObject;
if (mapIcon.iconType === MAP_ICON_TYPE.PLAYER) {
gameObject = this.add.circle(iconPosition.x, iconPosition.y, 4, 0xff0000, 1).setOrigin(0);
} else {
gameObject = this.add.image(iconPosition.x, iconPosition.y, 'questIcon').setScale(0.4).setOrigin(0);
}
this.#mapIconGameObjects[key] = gameObject;
this.#mapContainer.add(gameObject);
});
}

/**
* @param {number} worldX
* @param {number} worldY
* @returns {{x: number, y: number}}
*/
#calculateIconPosition(worldX, worldY) {
const xRatio = worldX / this.#worldWidth;
const yRatio = worldY / this.#worldHeight;

return {
x: xRatio * this.#miniMapWidth,
y: yRatio * this.#miniMapHeight,
};
}
}
116,274 changes: 116,274 additions & 0 deletions phaser-3/3.80/minimap-2-demo/src/types/phaser.d.ts

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions phaser-3/3.87/custom-fonts/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
}
11 changes: 11 additions & 0 deletions phaser-3/3.87/custom-fonts/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.semi": true,
"editor.formatOnSave": true,
"cSpell.words": ["Kenney"]
}
17 changes: 17 additions & 0 deletions phaser-3/3.87/custom-fonts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Phaser 3 - Custom Fonts With Native Phaser

![demo](docs/example.png)

A quick demo of how you can easily use custom fonts in Phaser 3 by using the new `FontFile` Loader! This new loader is available in Phaser `3.87.0`, and it has support for `TTF/OTF` out of the box, so you no longer need to use a 3rd party font loader.

For a detailed walkthrough, checkout my video on YouTube here:

[<img src="https://i.ytimg.com/vi/cKe9JT2lW8w/hqdefault.jpg">](https://youtu.be/cKe9JT2lW8w "Phaser 3.87 Update: Custom Fonts Done Right!")

Link to live demo:

[Custom Fonts](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/native-custom-fonts/index.html)

## Credit

The custom fonts that were used in this demo were created by [Kenney](https://www.kenney.nl/assets/kenney-fonts) and [CodeMan38](https://fonts.google.com/?query=CodeMan38).
Binary file not shown.
22 changes: 22 additions & 0 deletions phaser-3/3.87/custom-fonts/assets/fonts/License.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@


Font package (free)

Created/distributed by Kenney (www.kenney.nl)

------------------------------

License: (Creative Commons Zero, CC0)
http://creativecommons.org/publicdomain/zero/1.0/

This content is free to use in personal, educational and commercial projects.
Support us by crediting (Kenney or www.kenney.nl), this is not mandatory.

------------------------------

Donate: http://support.kenney.nl
Request: http://request.kenney.nl
Patreon: http://patreon.com/kenney/

Follow on Twitter for updates:
@KenneyNL
Binary file added phaser-3/3.87/custom-fonts/docs/example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions phaser-3/3.87/custom-fonts/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phaser 3 - Custom Fonts With Native Phaser!</title>
<style>
html,
body,
.container {
margin: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #d7d7d7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<script src="//cdn.jsdelivr.net/npm/phaser@3.87.0/dist/phaser.min.js"></script>
</head>
<body>
<div class="container" id="game-container"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions phaser-3/3.87/custom-fonts/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"checkJs": true
}
}
1 change: 1 addition & 0 deletions phaser-3/3.87/custom-fonts/src/lib/phaser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default window.Phaser;
58 changes: 58 additions & 0 deletions phaser-3/3.87/custom-fonts/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import Phaser from './lib/phaser.js';

class MainScene extends Phaser.Scene {
constructor() {
super(MainScene.name);
}

preload() {
this.load.font(
'Kenney-Future-Narrow',
'assets/fonts/Kenney-Future-Narrow.ttf',
'truetype'
);
this.load.font(
'PressStart2P',
'https://raw.githubusercontent.com/google/fonts/refs/heads/main/ofl/pressstart2p/PressStart2P-Regular.ttf',
'truetype'
);
}

create() {
const w = this.scale.width / 2;
this.add
.text(w, 100, 'Default Font Family', {
fontSize: 40,
color: '#ffffff',
})
.setOrigin(0.5);
this.add
.text(w, 200, 'Press Start 2P', {
fontSize: 40,
color: '#ffffff',
fontFamily: 'PressStart2P',
})
.setOrigin(0.5);
this.add
.text(w, 300, 'Kenny Future Narrow', {
fontSize: 40,
color: '#ffffff',
fontFamily: 'Kenney-Future-Narrow',
})
.setOrigin(0.5);
}
}

const gameConfig = {
type: Phaser.CANVAS,
pixelArt: true,
scale: {
parent: 'game-container',
width: 800,
height: 480,
},
backgroundColor: '#5c5b5b',
scene: [MainScene],
};

const game = new Phaser.Game(gameConfig);
118,425 changes: 118,425 additions & 0 deletions phaser-3/3.87/custom-fonts/src/types/phaser.d.ts

Large diffs are not rendered by default.