├── .babelrc ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── README.md ├── assets ├── audio │ ├── sfx.ac3 │ ├── sfx.json │ ├── sfx.m4a │ ├── sfx.mp3 │ └── sfx.ogg ├── fonts │ ├── font.fnt │ └── font.png ├── images │ ├── black-clouds.png │ ├── blue-sky.png │ ├── clouds.png │ ├── mario-sprites.png │ ├── super-mario-16bit.png │ └── super-mario.png ├── json │ └── attractMode.json ├── mario-sprites.json ├── mario-sprites.png ├── mariobros │ ├── mario-sprites.json │ └── mario-sprites.png ├── music │ ├── overworld.mp3 │ └── overworld.ogg ├── plugins │ ├── AnimatedTiles.js │ └── AnimatedTiles.min.js └── tilemaps │ └── super-mario.json ├── index.html ├── package-lock.json ├── package.json ├── rawAssets ├── gimp │ ├── coin.xcf │ ├── fire.xcf │ ├── firemario.xcf │ ├── flower.xcf │ ├── goomba.xcf │ ├── powerups.xcf │ └── trampoline.xcf ├── mario-sprites.tps ├── sfx │ ├── smb_1-up.wav │ ├── smb_bowserfalls.wav │ ├── smb_breakblock.wav │ ├── smb_bump.wav │ ├── smb_coin.wav │ ├── smb_fireball.wav │ ├── smb_fireworks.wav │ ├── smb_flagpole.wav │ ├── smb_gameover.wav │ ├── smb_jump-small.wav │ ├── smb_jump-super.wav │ ├── smb_kick.wav │ ├── smb_mariodie.wav │ ├── smb_pause.wav │ ├── smb_pipe.wav │ ├── smb_powerup.wav │ ├── smb_powerup_appears.wav │ ├── smb_stage_clear.wav │ ├── smb_stomp.wav │ ├── smb_vine.wav │ ├── smb_warning.wav │ └── smb_world_clear.wav ├── smb-phaser3.gif ├── sprites │ ├── brick.png │ ├── coin │ │ ├── coin1.png │ │ ├── coin2.png │ │ ├── coin3.png │ │ ├── spin1.png │ │ ├── spin2.png │ │ ├── spin3.png │ │ └── spin4.png │ ├── controller │ │ ├── button.png │ │ └── dpad.png │ ├── fire │ │ ├── explode1.png │ │ ├── explode2.png │ │ ├── explode3.png │ │ ├── fly1.png │ │ ├── fly2.png │ │ ├── fly3.png │ │ └── fly4.png │ ├── flag.png │ ├── goomba │ │ ├── flat.png │ │ ├── walk1.png │ │ └── walk2.png │ ├── mario │ │ ├── bend.png │ │ ├── bendFire.png │ │ ├── bendSuper.png │ │ ├── climb0.png │ │ ├── climb1.png │ │ ├── climbFire0.png │ │ ├── climbFire1.png │ │ ├── climbSuper0.png │ │ ├── climbSuper1.png │ │ ├── dead.png │ │ ├── fire.png │ │ ├── half.png │ │ ├── jump.png │ │ ├── jumpFire.png │ │ ├── jumpSuper.png │ │ ├── stand.png │ │ ├── standFire.png │ │ ├── standSuper.png │ │ ├── swim1.png │ │ ├── swim2.png │ │ ├── swim3.png │ │ ├── swim4.png │ │ ├── swim5.png │ │ ├── swimFire1.png │ │ ├── swimFire2.png │ │ ├── swimFire3.png │ │ ├── swimFire4.png │ │ ├── swimFire5.png │ │ ├── swimFire6.png │ │ ├── swimSuper1.png │ │ ├── swimSuper2.png │ │ ├── swimSuper3.png │ │ ├── swimSuper4.png │ │ ├── swimSuper5.png │ │ ├── swimSuper6.png │ │ ├── turn.png │ │ ├── turnFire.png │ │ ├── turnSuper.png │ │ ├── walk1.png │ │ ├── walk2.png │ │ ├── walk3.png │ │ ├── walkFire1.png │ │ ├── walkFire2.png │ │ ├── walkFire3.png │ │ ├── walkSuper1.png │ │ ├── walkSuper2.png │ │ └── walkSuper3.png │ ├── other │ │ ├── cloud.png │ │ ├── platform.png │ │ ├── trampoline1.png │ │ ├── trampoline2.png │ │ └── trampoline3.png │ ├── powerup │ │ ├── 1up.png │ │ ├── flower1.png │ │ ├── flower2.png │ │ ├── flower3.png │ │ ├── flower4.png │ │ ├── star1.png │ │ ├── star2.png │ │ ├── star3.png │ │ ├── star4.png │ │ └── super.png │ ├── title.png │ └── turtle │ │ ├── shell.png │ │ ├── turtle0.png │ │ └── turtle1.png ├── sprites_source.png ├── title.png └── titlescreen.xcf ├── src ├── helpers │ └── animations.js ├── index.html ├── main.js ├── scenes │ ├── BootScene.js │ ├── GameScene.js │ └── TitleScene.js └── sprites │ ├── Enemy.js │ ├── Fire.js │ ├── Goomba.js │ ├── Mario.js │ ├── PowerUp.js │ ├── SMBTileSprite.js │ └── Turtle.js ├── webpack.config.js └── webpack.production.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "standard", 4 | "parserOptions": { 5 | "ecmaVersion": 6, 6 | "sourceType": "module" 7 | }, 8 | "env": { 9 | "browser": true 10 | }, 11 | "rules": { 12 | "no-cond-assign": ["error", "except-parens"], 13 | "no-duplicate-case": ["error"], 14 | 15 | "accessor-pairs": "error", 16 | "curly": "error", 17 | "eqeqeq": ["error", "smart"], 18 | "no-alert": "error", 19 | "no-caller": "error", 20 | "no-console": ["error", { 21 | "allow": ["warn", "log"] 22 | }], 23 | "no-floating-decimal": "error", 24 | "no-invalid-this": "error", 25 | "no-multi-spaces": "error", 26 | "no-multi-str": "error", 27 | "no-new-func": "error", 28 | "no-new-wrappers": "error", 29 | "no-redeclare": "error", 30 | "no-self-assign": "error", 31 | "no-self-compare": "error", 32 | "yoda": ["error", "never"], 33 | 34 | "block-spacing": ["error", "always"], 35 | "brace-style": ["error", "1tbs", { 36 | "allowSingleLine": true 37 | }], 38 | "camelcase": "error", 39 | "comma-dangle": ["error", "never"], 40 | "comma-style": ["error", "last"], 41 | "computed-property-spacing": ["error", "never"], 42 | "consistent-this": ["error", "_this"], 43 | "eol-last": ["error"], 44 | "func-call-spacing": ["error", "never"], 45 | "indent": ["error", 4, { 46 | "SwitchCase": 1 47 | }], 48 | "key-spacing": ["error", { 49 | "beforeColon": false, 50 | "afterColon": true 51 | }], 52 | "linebreak-style": ["off"], 53 | "lines-around-comment": ["error", { 54 | "beforeBlockComment": true, 55 | "afterBlockComment": false, 56 | "beforeLineComment": false, 57 | "afterLineComment": false, 58 | "allowBlockStart": true, 59 | "allowBlockEnd": false, 60 | "allowObjectStart": true, 61 | "allowArrayStart": true 62 | }], 63 | "space-before-function-paren": [0, { 64 | "anonymous": "always", 65 | "named": "always", 66 | "asyncArrow": "always" 67 | }], 68 | "new-parens": "error", 69 | "no-array-constructor": "error", 70 | "no-lonely-if": "error", 71 | "no-mixed-spaces-and-tabs": "error", 72 | "no-plusplus": "off", 73 | "no-trailing-spaces": ["error", { 74 | "skipBlankLines": true, 75 | "ignoreComments": true 76 | }], 77 | "no-underscore-dangle": "off", 78 | "no-whitespace-before-property": "error", 79 | "object-curly-newline": ["error", { 80 | "multiline": true, 81 | "minProperties": 1 82 | }], 83 | "one-var-declaration-per-line": ["error", "initializations"], 84 | "quote-props": ["error", "as-needed"], 85 | "quotes": ["error", "single"], 86 | "semi-spacing": ["error", { 87 | "before": false, 88 | "after": true 89 | }], 90 | "semi": ["error", "always"], 91 | "space-before-blocks": "error", 92 | "space-in-parens": ["error", "never"], 93 | "space-infix-ops": ["error", { 94 | "int32Hint": true 95 | }], 96 | "wrap-regex": "error", 97 | "spaced-comment": ["error", "always", { 98 | "block": { 99 | "balanced": true, 100 | "exceptions": ["*", "!"] 101 | } 102 | }] 103 | }, 104 | "globals": { 105 | "Phaser": true 106 | }, 107 | "settings": { 108 | "import/core-modules": ["phaser"] 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | build/ 4 | dev/ 5 | .vscode/ 6 | .idea 7 | *.log 8 | src_old 9 | *.old.js 10 | phaserTilemapfix 11 | *.zip 12 | legacy* 13 | *.txt 14 | dump/ 15 | *.docx 16 | *.patch 17 | *.bak* 18 | *.old* 19 | higherVolume/ -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Kind of a changelog 2 | 3 | #### 2018-09-10 4 | - Phaser 3.12 5 | - Babel 7 6 | - Leaving the source code introduced some issues. If you want to help out, check out this thread at HTML5GAMEDEVS: http://www.html5gamedevs.com/topic/35471-generic-platformer-es6-webpack-4-boilerplate/ 7 | 8 | #### 2018-06-02 9 | - Webpack 4! 10 | - Attract mode is working again, and the online demo was updated 11 | 12 | #### 2018-06-01 13 | - Fire flowers and fire balls in a pool. Nice 14 | 15 | #### 2018-05-30 16 | - Forgot this had a changelog. Stuff such as title screen and attract mode was done without a note. 17 | - Phaser 3.9.0 and Animated Tiles 2.0.2 18 | - Added touch on title screen (touch controls during game play was already implemented but never reached after title screen was added :-/) 19 | - Fixed pixel art 20 | - Broke Attract Mode. Something physics related changed in Phaser and the json recording I use just don't work anymore. 21 | - Reorganized the code base and started to make it cleaner. 22 | 23 | #### 2018-02-04 24 | - Added a flag in the end of the level 25 | - Fixed volume for sound effects 26 | 27 | #### 2018-02-03 28 | - HUD: Score and Time. 29 | - Hurry up music. 30 | - Variable jump height. 31 | - Toggle 16-bit / 8-bit 32 | 33 | #### 2018-02-02 34 | Sound effects. Phaser 3 Beta 20. 35 | 36 | #### 2018-02-01 37 | First version of platformer example released. -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at leandcabrera@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Generic Platformer and Phaser Bootstrap Project 2 | #### Phaser 3 + ES6 + Webpack 3 | 4 | This repository started as a sandbox for testing out Phaser 3 while it was in Beta bundeled with a few examples. These examples are now removed and replaced with a generic platformer project that explores Phaser 3 API. With the example project removed this is still a good boiler plate to start with. The aim of the platformer is not to relase a game but to try stuff out and to share something for others to learn from. I usually think the best way to learn is to read and manipulate source code. A quick disclaimer though, even if my aim is to identify best practices that's far from where the source code is today. I don't use pools. I do define at least one global function. Etc etc. 5 | 6 | ![Running example](https://github.com/nkholski/phaser3-es6-webpack/raw/master/rawAssets/smb-phaser3.gif) 7 | 8 | **Live demo:** http://metroid.niklasberg.se/phaser3platformer/ 9 | 10 | The boiler plate code is based on the excellent Bootstrap project for Phaser 2 "Phaser + ES6 + Webpack" (https://github.com/lean/phaser-es6-webpack), which was based on https://github.com/belohlavek/phaser-es6-boilerplate and https://github.com/cstuncsik/phaser-es6-demo. Most of this project is an exact copy of that repository, only with the Phaser package updated to Phaser 3 and the example replaced with one based on Phaser 3. If (or when) Lean releases a Phaser 3 version of their own I'll probably shift to use that and focus on the generic platformer. 11 | 12 | **Disclaimer**: The generic platformer isn't an attempt to recreate any copyrighted game, and it will not become a playable game. You get nothing out of this besides learning about Phaser 3. 13 | 14 | # Contribute 15 | Please any submit issues you have, including proposals. Ask me before preparing a PR or your PR might be rejected if in conflict with other ideas and planned way to do stuff. This would be great: 16 | - Feedback on best practises and why I'm being stupid 17 | - Extend the sprites texture atlas from the spritesheets I still use so I can dump them 18 | 19 | # Parts of API used: 20 | A messy list of things I used from the Phaser API. I'll try to improve this, but it gives a hint of what you might expect to find in the source code to read bring to your own projects. 21 | 22 | **Preloader** 23 | - image, tilemapTiledJSON, spritesheet, atlas, audio, audiosprite, bitmapFont, plugin 24 | 25 | **Input** 26 | - Phaser.Input.Keyboard 27 | - Touch controls 28 | 29 | **Audio** 30 | - Audioatlas (including some event listeners) 31 | - Music (pause/resume/rate) 32 | 33 | **Animations** 34 | - Animating sprites 35 | 36 | **Tilemaps** 37 | - Multiple layers 38 | - Dynamic layers 39 | - Animated tiles (Plugin: https://github.com/nkholski/phaser-animated-tiles) 40 | - Object layers are used to manipulate the map, define areas and add enemies. 41 | 42 | **Tilesprite** 43 | - Background clouds 44 | 45 | **Sprites** 46 | - All sprites are ES6 extensions of native Phaser.Sprite 47 | 48 | **Physics** 49 | - Acceleration 50 | - body sizes 51 | - pause 52 | - collisions and overlap sprite/sprite and sprite/tilemaplayer 53 | 54 | **Groups** 55 | - Sprites are put in groups 56 | 57 | **BitmapText** 58 | - For score and timer 59 | 60 | **Tweens** 61 | - entering pipes, ending the world etc. 62 | 63 | # Thanks to 64 | - The Phaser team @photonstorm, @mikewesthad and @pavle-goloskokovic for building Phaser 3 in general and for assisting while building this. 65 | - @AleBles - Updated webpack-stuff when the project was stalled at Beta 19. 66 | 67 | # Setup 68 | You’ll need to install a few things before you have a working copy of the project. 69 | 70 | ## 1. Clone this repo: 71 | 72 | Navigate into your workspace directory. 73 | 74 | Run: 75 | 76 | ```git clone https://github.com/nkholski/phaser3-es6-webpack.git``` 77 | 78 | ## 2. Install node.js and npm: 79 | 80 | https://nodejs.org/en/ 81 | 82 | 83 | ## 3. Install dependencies (optionally you could install [yarn](https://yarnpkg.com/)): 84 | 85 | Navigate to the cloned repo’s directory. 86 | 87 | Run: 88 | 89 | ```npm install``` 90 | 91 | or if you choose yarn, just run ```yarn``` 92 | 93 | ## 4. Run the development server: 94 | 95 | Run: 96 | 97 | ```npm run dev``` 98 | 99 | This will run a server so you can run the game in a browser. 100 | 101 | Open your browser and enter localhost:3000 into the address bar. 102 | 103 | Also this will start a watch process, so you can change the source and the process will recompile and refresh the browser. 104 | 105 | 106 | ## Build for deployment: 107 | 108 | Run: 109 | 110 | ```npm run deploy``` 111 | 112 | This will optimize and minimize the compiled bundle. 113 | -------------------------------------------------------------------------------- /assets/audio/sfx.ac3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/audio/sfx.ac3 -------------------------------------------------------------------------------- /assets/audio/sfx.json: -------------------------------------------------------------------------------- 1 | { 2 | "resources": [ 3 | "../../assets/audio/sfx.ogg", 4 | "../../assets/audio/sfx.m4a", 5 | "../../assets/audio/sfx.mp3", 6 | "../../assets/audio/sfx.ac3" 7 | ], 8 | "spritemap": { 9 | "smb_1-up": { 10 | "start": 0, 11 | "end": 0.8496145124716553, 12 | "loop": false 13 | }, 14 | "smb_bowserfalls": { 15 | "start": 2, 16 | "end": 3.0319274376417233, 17 | "loop": false 18 | }, 19 | "smb_breakblock": { 20 | "start": 5, 21 | "end": 5.547210884353742, 22 | "loop": false 23 | }, 24 | "smb_bump": { 25 | "start": 7, 26 | "end": 7.214693877551021, 27 | "loop": false 28 | }, 29 | "smb_coin": { 30 | "start": 9, 31 | "end": 9.945487528344671, 32 | "loop": false 33 | }, 34 | "smb_fireball": { 35 | "start": 11, 36 | "end": 11.131473922902494, 37 | "loop": false 38 | }, 39 | "smb_fireworks": { 40 | "start": 13, 41 | "end": 13.42140589569161, 42 | "loop": false 43 | }, 44 | "smb_flagpole": { 45 | "start": 15, 46 | "end": 16.17151927437642, 47 | "loop": false 48 | }, 49 | "smb_gameover": { 50 | "start": 18, 51 | "end": 21.77437641723356, 52 | "loop": false 53 | }, 54 | "smb_jump-small": { 55 | "start": 23, 56 | "end": 23.59011337868481, 57 | "loop": false 58 | }, 59 | "smb_jump-super": { 60 | "start": 25, 61 | "end": 25.583990929705216, 62 | "loop": false 63 | }, 64 | "smb_kick": { 65 | "start": 27, 66 | "end": 27.181179138321994, 67 | "loop": false 68 | }, 69 | "smb_mariodie": { 70 | "start": 29, 71 | "end": 31.712290249433106, 72 | "loop": false 73 | }, 74 | "smb_pause": { 75 | "start": 33, 76 | "end": 33.68517006802721, 77 | "loop": false 78 | }, 79 | "smb_pipe": { 80 | "start": 35, 81 | "end": 35.784126984126985, 82 | "loop": false 83 | }, 84 | "smb_powerup_appears": { 85 | "start": 37, 86 | "end": 37.5843537414966, 87 | "loop": false 88 | }, 89 | "smb_powerup": { 90 | "start": 39, 91 | "end": 39.98916099773243, 92 | "loop": false 93 | }, 94 | "smb_stage_clear": { 95 | "start": 41, 96 | "end": 46.641496598639456, 97 | "loop": false 98 | }, 99 | "smb_stomp": { 100 | "start": 48, 101 | "end": 48.2746485260771, 102 | "loop": false 103 | }, 104 | "smb_warning": { 105 | "start": 50, 106 | "end": 52.93138321995465, 107 | "loop": false 108 | }, 109 | "smb_vine": { 110 | "start": 54, 111 | "end": 55.15986394557823, 112 | "loop": false 113 | }, 114 | "smb_world_clear": { 115 | "start": 57, 116 | "end": 63.26412698412698, 117 | "loop": false 118 | } 119 | } 120 | } -------------------------------------------------------------------------------- /assets/audio/sfx.m4a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/audio/sfx.m4a -------------------------------------------------------------------------------- /assets/audio/sfx.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/audio/sfx.mp3 -------------------------------------------------------------------------------- /assets/audio/sfx.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/audio/sfx.ogg -------------------------------------------------------------------------------- /assets/fonts/font.fnt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /assets/fonts/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/fonts/font.png -------------------------------------------------------------------------------- /assets/images/black-clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/images/black-clouds.png -------------------------------------------------------------------------------- /assets/images/blue-sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/images/blue-sky.png -------------------------------------------------------------------------------- /assets/images/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/images/clouds.png -------------------------------------------------------------------------------- /assets/images/mario-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/images/mario-sprites.png -------------------------------------------------------------------------------- /assets/images/super-mario-16bit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/images/super-mario-16bit.png -------------------------------------------------------------------------------- /assets/images/super-mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/images/super-mario.png -------------------------------------------------------------------------------- /assets/mario-sprites.json: -------------------------------------------------------------------------------- 1 | {"frames": [ 2 | 3 | { 4 | "filename": "brick", 5 | "frame": {"x":0,"y":0,"w":9,"h":5}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":9,"h":5}, 9 | "sourceSize": {"w":9,"h":5} 10 | }, 11 | { 12 | "filename": "coin/coin1", 13 | "frame": {"x":87,"y":0,"w":10,"h":14}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 17 | "sourceSize": {"w":10,"h":14} 18 | }, 19 | { 20 | "filename": "coin/coin2", 21 | "frame": {"x":97,"y":0,"w":10,"h":14}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 25 | "sourceSize": {"w":10,"h":14} 26 | }, 27 | { 28 | "filename": "coin/coin3", 29 | "frame": {"x":77,"y":0,"w":10,"h":14}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 33 | "sourceSize": {"w":10,"h":14} 34 | }, 35 | { 36 | "filename": "coin/spin1", 37 | "frame": {"x":57,"y":0,"w":10,"h":14}, 38 | "rotated": false, 39 | "trimmed": false, 40 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 41 | "sourceSize": {"w":10,"h":14} 42 | }, 43 | { 44 | "filename": "coin/spin2", 45 | "frame": {"x":67,"y":0,"w":10,"h":14}, 46 | "rotated": false, 47 | "trimmed": false, 48 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 49 | "sourceSize": {"w":10,"h":14} 50 | }, 51 | { 52 | "filename": "coin/spin3", 53 | "frame": {"x":107,"y":0,"w":10,"h":14}, 54 | "rotated": false, 55 | "trimmed": false, 56 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 57 | "sourceSize": {"w":10,"h":14} 58 | }, 59 | { 60 | "filename": "coin/spin4", 61 | "frame": {"x":117,"y":0,"w":10,"h":14}, 62 | "rotated": false, 63 | "trimmed": false, 64 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":14}, 65 | "sourceSize": {"w":10,"h":14} 66 | }, 67 | { 68 | "filename": "controller/button", 69 | "frame": {"x":112,"y":120,"w":42,"h":41}, 70 | "rotated": false, 71 | "trimmed": false, 72 | "spriteSourceSize": {"x":0,"y":0,"w":42,"h":41}, 73 | "sourceSize": {"w":42,"h":41} 74 | }, 75 | { 76 | "filename": "controller/dpad", 77 | "frame": {"x":154,"y":120,"w":74,"h":75}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":74,"h":75}, 81 | "sourceSize": {"w":74,"h":75} 82 | }, 83 | { 84 | "filename": "fire/explode1", 85 | "frame": {"x":80,"y":32,"w":16,"h":16}, 86 | "rotated": false, 87 | "trimmed": false, 88 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 89 | "sourceSize": {"w":16,"h":16} 90 | }, 91 | { 92 | "filename": "fire/explode2", 93 | "frame": {"x":112,"y":32,"w":16,"h":16}, 94 | "rotated": false, 95 | "trimmed": false, 96 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 97 | "sourceSize": {"w":16,"h":16} 98 | }, 99 | { 100 | "filename": "fire/explode3", 101 | "frame": {"x":96,"y":32,"w":16,"h":16}, 102 | "rotated": false, 103 | "trimmed": false, 104 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 105 | "sourceSize": {"w":16,"h":16} 106 | }, 107 | { 108 | "filename": "fire/fly1", 109 | "frame": {"x":17,"y":0,"w":8,"h":8}, 110 | "rotated": false, 111 | "trimmed": false, 112 | "spriteSourceSize": {"x":0,"y":0,"w":8,"h":8}, 113 | "sourceSize": {"w":8,"h":8} 114 | }, 115 | { 116 | "filename": "fire/fly2", 117 | "frame": {"x":9,"y":0,"w":8,"h":8}, 118 | "rotated": false, 119 | "trimmed": false, 120 | "spriteSourceSize": {"x":0,"y":0,"w":8,"h":8}, 121 | "sourceSize": {"w":8,"h":8} 122 | }, 123 | { 124 | "filename": "fire/fly3", 125 | "frame": {"x":25,"y":0,"w":8,"h":8}, 126 | "rotated": false, 127 | "trimmed": false, 128 | "spriteSourceSize": {"x":0,"y":0,"w":8,"h":8}, 129 | "sourceSize": {"w":8,"h":8} 130 | }, 131 | { 132 | "filename": "fire/fly4", 133 | "frame": {"x":49,"y":0,"w":8,"h":8}, 134 | "rotated": false, 135 | "trimmed": false, 136 | "spriteSourceSize": {"x":0,"y":0,"w":8,"h":8}, 137 | "sourceSize": {"w":8,"h":8} 138 | }, 139 | { 140 | "filename": "flag", 141 | "frame": {"x":64,"y":32,"w":16,"h":16}, 142 | "rotated": false, 143 | "trimmed": false, 144 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 145 | "sourceSize": {"w":16,"h":16} 146 | }, 147 | { 148 | "filename": "goomba/flat", 149 | "frame": {"x":48,"y":32,"w":16,"h":16}, 150 | "rotated": false, 151 | "trimmed": false, 152 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 153 | "sourceSize": {"w":16,"h":16} 154 | }, 155 | { 156 | "filename": "goomba/walk1", 157 | "frame": {"x":0,"y":32,"w":16,"h":16}, 158 | "rotated": false, 159 | "trimmed": false, 160 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 161 | "sourceSize": {"w":16,"h":16} 162 | }, 163 | { 164 | "filename": "goomba/walk2", 165 | "frame": {"x":32,"y":32,"w":16,"h":16}, 166 | "rotated": false, 167 | "trimmed": false, 168 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 169 | "sourceSize": {"w":16,"h":16} 170 | }, 171 | { 172 | "filename": "mario/bend", 173 | "frame": {"x":16,"y":32,"w":16,"h":16}, 174 | "rotated": false, 175 | "trimmed": false, 176 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 177 | "sourceSize": {"w":16,"h":16} 178 | }, 179 | { 180 | "filename": "mario/bendFire", 181 | "frame": {"x":96,"y":56,"w":16,"h":32}, 182 | "rotated": false, 183 | "trimmed": false, 184 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 185 | "sourceSize": {"w":16,"h":32} 186 | }, 187 | { 188 | "filename": "mario/bendSuper", 189 | "frame": {"x":64,"y":56,"w":16,"h":32}, 190 | "rotated": false, 191 | "trimmed": false, 192 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 193 | "sourceSize": {"w":16,"h":32} 194 | }, 195 | { 196 | "filename": "mario/climb0", 197 | "frame": {"x":208,"y":16,"w":16,"h":16}, 198 | "rotated": false, 199 | "trimmed": false, 200 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 201 | "sourceSize": {"w":16,"h":16} 202 | }, 203 | { 204 | "filename": "mario/climb1", 205 | "frame": {"x":128,"y":32,"w":16,"h":16}, 206 | "rotated": false, 207 | "trimmed": false, 208 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 209 | "sourceSize": {"w":16,"h":16} 210 | }, 211 | { 212 | "filename": "mario/climbFire0", 213 | "frame": {"x":192,"y":88,"w":16,"h":32}, 214 | "rotated": false, 215 | "trimmed": false, 216 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 217 | "sourceSize": {"w":16,"h":32} 218 | }, 219 | { 220 | "filename": "mario/climbFire1", 221 | "frame": {"x":64,"y":120,"w":16,"h":32}, 222 | "rotated": false, 223 | "trimmed": false, 224 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 225 | "sourceSize": {"w":16,"h":32} 226 | }, 227 | { 228 | "filename": "mario/climbSuper0", 229 | "frame": {"x":16,"y":120,"w":16,"h":32}, 230 | "rotated": false, 231 | "trimmed": false, 232 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 233 | "sourceSize": {"w":16,"h":32} 234 | }, 235 | { 236 | "filename": "mario/climbSuper1", 237 | "frame": {"x":128,"y":56,"w":16,"h":32}, 238 | "rotated": false, 239 | "trimmed": false, 240 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 241 | "sourceSize": {"w":16,"h":32} 242 | }, 243 | { 244 | "filename": "mario/dead", 245 | "frame": {"x":160,"y":32,"w":16,"h":16}, 246 | "rotated": false, 247 | "trimmed": false, 248 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 249 | "sourceSize": {"w":16,"h":16} 250 | }, 251 | { 252 | "filename": "mario/fire", 253 | "frame": {"x":208,"y":56,"w":16,"h":32}, 254 | "rotated": false, 255 | "trimmed": false, 256 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 257 | "sourceSize": {"w":16,"h":32} 258 | }, 259 | { 260 | "filename": "mario/half", 261 | "frame": {"x":176,"y":56,"w":16,"h":32}, 262 | "rotated": false, 263 | "trimmed": false, 264 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 265 | "sourceSize": {"w":16,"h":32} 266 | }, 267 | { 268 | "filename": "mario/jump", 269 | "frame": {"x":144,"y":32,"w":16,"h":16}, 270 | "rotated": false, 271 | "trimmed": false, 272 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 273 | "sourceSize": {"w":16,"h":16} 274 | }, 275 | { 276 | "filename": "mario/jumpFire", 277 | "frame": {"x":208,"y":88,"w":16,"h":32}, 278 | "rotated": false, 279 | "trimmed": false, 280 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 281 | "sourceSize": {"w":16,"h":32} 282 | }, 283 | { 284 | "filename": "mario/jumpSuper", 285 | "frame": {"x":144,"y":56,"w":16,"h":32}, 286 | "rotated": false, 287 | "trimmed": false, 288 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 289 | "sourceSize": {"w":16,"h":32} 290 | }, 291 | { 292 | "filename": "mario/stand", 293 | "frame": {"x":64,"y":16,"w":16,"h":16}, 294 | "rotated": false, 295 | "trimmed": false, 296 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 297 | "sourceSize": {"w":16,"h":16} 298 | }, 299 | { 300 | "filename": "mario/standFire", 301 | "frame": {"x":0,"y":88,"w":16,"h":32}, 302 | "rotated": false, 303 | "trimmed": false, 304 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 305 | "sourceSize": {"w":16,"h":32} 306 | }, 307 | { 308 | "filename": "mario/standSuper", 309 | "frame": {"x":192,"y":56,"w":16,"h":32}, 310 | "rotated": false, 311 | "trimmed": false, 312 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 313 | "sourceSize": {"w":16,"h":32} 314 | }, 315 | { 316 | "filename": "mario/swim1", 317 | "frame": {"x":223,"y":0,"w":16,"h":16}, 318 | "rotated": false, 319 | "trimmed": false, 320 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 321 | "sourceSize": {"w":16,"h":16} 322 | }, 323 | { 324 | "filename": "mario/swim2", 325 | "frame": {"x":16,"y":16,"w":16,"h":16}, 326 | "rotated": false, 327 | "trimmed": false, 328 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 329 | "sourceSize": {"w":16,"h":16} 330 | }, 331 | { 332 | "filename": "mario/swim3", 333 | "frame": {"x":0,"y":16,"w":16,"h":16}, 334 | "rotated": false, 335 | "trimmed": false, 336 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 337 | "sourceSize": {"w":16,"h":16} 338 | }, 339 | { 340 | "filename": "mario/swim4", 341 | "frame": {"x":207,"y":0,"w":16,"h":16}, 342 | "rotated": false, 343 | "trimmed": false, 344 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 345 | "sourceSize": {"w":16,"h":16} 346 | }, 347 | { 348 | "filename": "mario/swim5", 349 | "frame": {"x":192,"y":16,"w":16,"h":16}, 350 | "rotated": false, 351 | "trimmed": false, 352 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 353 | "sourceSize": {"w":16,"h":16} 354 | }, 355 | { 356 | "filename": "mario/swimFire1", 357 | "frame": {"x":48,"y":56,"w":16,"h":32}, 358 | "rotated": false, 359 | "trimmed": false, 360 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 361 | "sourceSize": {"w":16,"h":32} 362 | }, 363 | { 364 | "filename": "mario/swimFire2", 365 | "frame": {"x":128,"y":88,"w":16,"h":32}, 366 | "rotated": false, 367 | "trimmed": false, 368 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 369 | "sourceSize": {"w":16,"h":32} 370 | }, 371 | { 372 | "filename": "mario/swimFire3", 373 | "frame": {"x":160,"y":88,"w":16,"h":32}, 374 | "rotated": false, 375 | "trimmed": false, 376 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 377 | "sourceSize": {"w":16,"h":32} 378 | }, 379 | { 380 | "filename": "mario/swimFire4", 381 | "frame": {"x":144,"y":88,"w":16,"h":32}, 382 | "rotated": false, 383 | "trimmed": false, 384 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 385 | "sourceSize": {"w":16,"h":32} 386 | }, 387 | { 388 | "filename": "mario/swimFire5", 389 | "frame": {"x":112,"y":88,"w":16,"h":32}, 390 | "rotated": false, 391 | "trimmed": false, 392 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 393 | "sourceSize": {"w":16,"h":32} 394 | }, 395 | { 396 | "filename": "mario/swimFire6", 397 | "frame": {"x":96,"y":88,"w":16,"h":32}, 398 | "rotated": false, 399 | "trimmed": false, 400 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 401 | "sourceSize": {"w":16,"h":32} 402 | }, 403 | { 404 | "filename": "mario/swimSuper1", 405 | "frame": {"x":48,"y":88,"w":16,"h":32}, 406 | "rotated": false, 407 | "trimmed": false, 408 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 409 | "sourceSize": {"w":16,"h":32} 410 | }, 411 | { 412 | "filename": "mario/swimSuper2", 413 | "frame": {"x":176,"y":88,"w":16,"h":32}, 414 | "rotated": false, 415 | "trimmed": false, 416 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 417 | "sourceSize": {"w":16,"h":32} 418 | }, 419 | { 420 | "filename": "mario/swimSuper3", 421 | "frame": {"x":64,"y":88,"w":16,"h":32}, 422 | "rotated": false, 423 | "trimmed": false, 424 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 425 | "sourceSize": {"w":16,"h":32} 426 | }, 427 | { 428 | "filename": "mario/swimSuper4", 429 | "frame": {"x":32,"y":88,"w":16,"h":32}, 430 | "rotated": false, 431 | "trimmed": false, 432 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 433 | "sourceSize": {"w":16,"h":32} 434 | }, 435 | { 436 | "filename": "mario/swimSuper5", 437 | "frame": {"x":32,"y":120,"w":16,"h":32}, 438 | "rotated": false, 439 | "trimmed": false, 440 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 441 | "sourceSize": {"w":16,"h":32} 442 | }, 443 | { 444 | "filename": "mario/swimSuper6", 445 | "frame": {"x":48,"y":120,"w":16,"h":32}, 446 | "rotated": false, 447 | "trimmed": false, 448 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 449 | "sourceSize": {"w":16,"h":32} 450 | }, 451 | { 452 | "filename": "mario/turn", 453 | "frame": {"x":191,"y":0,"w":16,"h":16}, 454 | "rotated": false, 455 | "trimmed": false, 456 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 457 | "sourceSize": {"w":16,"h":16} 458 | }, 459 | { 460 | "filename": "mario/turnFire", 461 | "frame": {"x":96,"y":120,"w":16,"h":32}, 462 | "rotated": false, 463 | "trimmed": false, 464 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 465 | "sourceSize": {"w":16,"h":32} 466 | }, 467 | { 468 | "filename": "mario/turnSuper", 469 | "frame": {"x":80,"y":120,"w":16,"h":32}, 470 | "rotated": false, 471 | "trimmed": false, 472 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 473 | "sourceSize": {"w":16,"h":32} 474 | }, 475 | { 476 | "filename": "mario/walk1", 477 | "frame": {"x":127,"y":0,"w":16,"h":16}, 478 | "rotated": false, 479 | "trimmed": false, 480 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 481 | "sourceSize": {"w":16,"h":16} 482 | }, 483 | { 484 | "filename": "mario/walk2", 485 | "frame": {"x":143,"y":0,"w":16,"h":16}, 486 | "rotated": false, 487 | "trimmed": false, 488 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 489 | "sourceSize": {"w":16,"h":16} 490 | }, 491 | { 492 | "filename": "mario/walk3", 493 | "frame": {"x":159,"y":0,"w":16,"h":16}, 494 | "rotated": false, 495 | "trimmed": false, 496 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 497 | "sourceSize": {"w":16,"h":16} 498 | }, 499 | { 500 | "filename": "mario/walkFire1", 501 | "frame": {"x":0,"y":120,"w":16,"h":32}, 502 | "rotated": false, 503 | "trimmed": false, 504 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 505 | "sourceSize": {"w":16,"h":32} 506 | }, 507 | { 508 | "filename": "mario/walkFire2", 509 | "frame": {"x":80,"y":88,"w":16,"h":32}, 510 | "rotated": false, 511 | "trimmed": false, 512 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 513 | "sourceSize": {"w":16,"h":32} 514 | }, 515 | { 516 | "filename": "mario/walkFire3", 517 | "frame": {"x":160,"y":56,"w":16,"h":32}, 518 | "rotated": false, 519 | "trimmed": false, 520 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 521 | "sourceSize": {"w":16,"h":32} 522 | }, 523 | { 524 | "filename": "mario/walkSuper1", 525 | "frame": {"x":16,"y":88,"w":16,"h":32}, 526 | "rotated": false, 527 | "trimmed": false, 528 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 529 | "sourceSize": {"w":16,"h":32} 530 | }, 531 | { 532 | "filename": "mario/walkSuper2", 533 | "frame": {"x":80,"y":56,"w":16,"h":32}, 534 | "rotated": false, 535 | "trimmed": false, 536 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 537 | "sourceSize": {"w":16,"h":32} 538 | }, 539 | { 540 | "filename": "mario/walkSuper3", 541 | "frame": {"x":112,"y":56,"w":16,"h":32}, 542 | "rotated": false, 543 | "trimmed": false, 544 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 545 | "sourceSize": {"w":16,"h":32} 546 | }, 547 | { 548 | "filename": "other/cloud", 549 | "frame": {"x":33,"y":0,"w":8,"h":8}, 550 | "rotated": false, 551 | "trimmed": false, 552 | "spriteSourceSize": {"x":0,"y":0,"w":8,"h":8}, 553 | "sourceSize": {"w":8,"h":8} 554 | }, 555 | { 556 | "filename": "other/platform", 557 | "frame": {"x":41,"y":0,"w":8,"h":8}, 558 | "rotated": false, 559 | "trimmed": false, 560 | "spriteSourceSize": {"x":0,"y":0,"w":8,"h":8}, 561 | "sourceSize": {"w":8,"h":8} 562 | }, 563 | { 564 | "filename": "other/trampoline1", 565 | "frame": {"x":0,"y":56,"w":16,"h":31}, 566 | "rotated": false, 567 | "trimmed": false, 568 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":31}, 569 | "sourceSize": {"w":16,"h":31} 570 | }, 571 | { 572 | "filename": "other/trampoline2", 573 | "frame": {"x":32,"y":56,"w":16,"h":31}, 574 | "rotated": false, 575 | "trimmed": false, 576 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":31}, 577 | "sourceSize": {"w":16,"h":31} 578 | }, 579 | { 580 | "filename": "other/trampoline3", 581 | "frame": {"x":16,"y":56,"w":16,"h":31}, 582 | "rotated": false, 583 | "trimmed": false, 584 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":31}, 585 | "sourceSize": {"w":16,"h":31} 586 | }, 587 | { 588 | "filename": "powerup/1up", 589 | "frame": {"x":144,"y":16,"w":16,"h":16}, 590 | "rotated": false, 591 | "trimmed": false, 592 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 593 | "sourceSize": {"w":16,"h":16} 594 | }, 595 | { 596 | "filename": "powerup/flower1", 597 | "frame": {"x":176,"y":16,"w":16,"h":16}, 598 | "rotated": false, 599 | "trimmed": false, 600 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 601 | "sourceSize": {"w":16,"h":16} 602 | }, 603 | { 604 | "filename": "powerup/flower2", 605 | "frame": {"x":160,"y":16,"w":16,"h":16}, 606 | "rotated": false, 607 | "trimmed": false, 608 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 609 | "sourceSize": {"w":16,"h":16} 610 | }, 611 | { 612 | "filename": "powerup/flower3", 613 | "frame": {"x":128,"y":16,"w":16,"h":16}, 614 | "rotated": false, 615 | "trimmed": false, 616 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 617 | "sourceSize": {"w":16,"h":16} 618 | }, 619 | { 620 | "filename": "powerup/flower4", 621 | "frame": {"x":112,"y":16,"w":16,"h":16}, 622 | "rotated": false, 623 | "trimmed": false, 624 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 625 | "sourceSize": {"w":16,"h":16} 626 | }, 627 | { 628 | "filename": "powerup/star1", 629 | "frame": {"x":175,"y":0,"w":16,"h":16}, 630 | "rotated": false, 631 | "trimmed": false, 632 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 633 | "sourceSize": {"w":16,"h":16} 634 | }, 635 | { 636 | "filename": "powerup/star2", 637 | "frame": {"x":32,"y":16,"w":16,"h":16}, 638 | "rotated": false, 639 | "trimmed": false, 640 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 641 | "sourceSize": {"w":16,"h":16} 642 | }, 643 | { 644 | "filename": "powerup/star3", 645 | "frame": {"x":80,"y":16,"w":16,"h":16}, 646 | "rotated": false, 647 | "trimmed": false, 648 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 649 | "sourceSize": {"w":16,"h":16} 650 | }, 651 | { 652 | "filename": "powerup/star4", 653 | "frame": {"x":96,"y":16,"w":16,"h":16}, 654 | "rotated": false, 655 | "trimmed": false, 656 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 657 | "sourceSize": {"w":16,"h":16} 658 | }, 659 | { 660 | "filename": "powerup/super", 661 | "frame": {"x":48,"y":16,"w":16,"h":16}, 662 | "rotated": false, 663 | "trimmed": false, 664 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 665 | "sourceSize": {"w":16,"h":16} 666 | }, 667 | { 668 | "filename": "title", 669 | "frame": {"x":0,"y":195,"w":176,"h":88}, 670 | "rotated": false, 671 | "trimmed": false, 672 | "spriteSourceSize": {"x":0,"y":0,"w":176,"h":88}, 673 | "sourceSize": {"w":176,"h":88} 674 | }, 675 | { 676 | "filename": "turtle/shell", 677 | "frame": {"x":208,"y":32,"w":16,"h":24}, 678 | "rotated": false, 679 | "trimmed": false, 680 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":24}, 681 | "sourceSize": {"w":16,"h":24} 682 | }, 683 | { 684 | "filename": "turtle/turtle0", 685 | "frame": {"x":192,"y":32,"w":16,"h":24}, 686 | "rotated": false, 687 | "trimmed": false, 688 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":24}, 689 | "sourceSize": {"w":16,"h":24} 690 | }, 691 | { 692 | "filename": "turtle/turtle1", 693 | "frame": {"x":176,"y":32,"w":16,"h":24}, 694 | "rotated": false, 695 | "trimmed": false, 696 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":24}, 697 | "sourceSize": {"w":16,"h":24} 698 | }], 699 | "meta": { 700 | "app": "https://www.codeandweb.com/texturepacker", 701 | "version": "1.0", 702 | "image": "mario-sprites.png", 703 | "format": "RGBA8888", 704 | "size": {"w":239,"h":283}, 705 | "scale": "1", 706 | "smartupdate": "$TexturePacker:SmartUpdate:da944747ff292ea73f90ded90ffae4f6:5a6fbb798dd9828bab4f10142fd6dc80:4f58bece13d73f4757a743d8358f7b7b$" 707 | } 708 | } 709 | -------------------------------------------------------------------------------- /assets/mario-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/mario-sprites.png -------------------------------------------------------------------------------- /assets/mariobros/mario-sprites.json: -------------------------------------------------------------------------------- 1 | {"frames": [ 2 | 3 | { 4 | "filename": "brick", 5 | "frame": {"x":0,"y":0,"w":9,"h":5}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":9,"h":5}, 9 | "sourceSize": {"w":9,"h":5} 10 | }, 11 | { 12 | "filename": "flag", 13 | "frame": {"x":0,"y":5,"w":16,"h":16}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 17 | "sourceSize": {"w":16,"h":16} 18 | }, 19 | { 20 | "filename": "mario/bend", 21 | "frame": {"x":0,"y":21,"w":16,"h":32}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 25 | "sourceSize": {"w":16,"h":32} 26 | }, 27 | { 28 | "filename": "mario/climb1", 29 | "frame": {"x":0,"y":53,"w":16,"h":16}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 33 | "sourceSize": {"w":16,"h":16} 34 | }, 35 | { 36 | "filename": "mario/climb1Super", 37 | "frame": {"x":0,"y":69,"w":16,"h":32}, 38 | "rotated": false, 39 | "trimmed": false, 40 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 41 | "sourceSize": {"w":16,"h":32} 42 | }, 43 | { 44 | "filename": "mario/climb2", 45 | "frame": {"x":0,"y":101,"w":16,"h":16}, 46 | "rotated": false, 47 | "trimmed": false, 48 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 49 | "sourceSize": {"w":16,"h":16} 50 | }, 51 | { 52 | "filename": "mario/climbSuper2", 53 | "frame": {"x":0,"y":117,"w":16,"h":32}, 54 | "rotated": false, 55 | "trimmed": false, 56 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 57 | "sourceSize": {"w":16,"h":32} 58 | }, 59 | { 60 | "filename": "mario/dead", 61 | "frame": {"x":0,"y":149,"w":16,"h":16}, 62 | "rotated": false, 63 | "trimmed": false, 64 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 65 | "sourceSize": {"w":16,"h":16} 66 | }, 67 | { 68 | "filename": "mario/fire", 69 | "frame": {"x":0,"y":165,"w":16,"h":32}, 70 | "rotated": false, 71 | "trimmed": false, 72 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 73 | "sourceSize": {"w":16,"h":32} 74 | }, 75 | { 76 | "filename": "mario/half", 77 | "frame": {"x":0,"y":197,"w":16,"h":32}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 81 | "sourceSize": {"w":16,"h":32} 82 | }, 83 | { 84 | "filename": "mario/jump", 85 | "frame": {"x":0,"y":229,"w":16,"h":16}, 86 | "rotated": false, 87 | "trimmed": false, 88 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 89 | "sourceSize": {"w":16,"h":16} 90 | }, 91 | { 92 | "filename": "mario/jumpSuper", 93 | "frame": {"x":0,"y":245,"w":16,"h":32}, 94 | "rotated": false, 95 | "trimmed": false, 96 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 97 | "sourceSize": {"w":16,"h":32} 98 | }, 99 | { 100 | "filename": "mario/stand", 101 | "frame": {"x":0,"y":277,"w":16,"h":16}, 102 | "rotated": false, 103 | "trimmed": false, 104 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 105 | "sourceSize": {"w":16,"h":16} 106 | }, 107 | { 108 | "filename": "mario/standSuper", 109 | "frame": {"x":0,"y":293,"w":16,"h":32}, 110 | "rotated": false, 111 | "trimmed": false, 112 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 113 | "sourceSize": {"w":16,"h":32} 114 | }, 115 | { 116 | "filename": "mario/swim1", 117 | "frame": {"x":0,"y":325,"w":16,"h":16}, 118 | "rotated": false, 119 | "trimmed": false, 120 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 121 | "sourceSize": {"w":16,"h":16} 122 | }, 123 | { 124 | "filename": "mario/swim2", 125 | "frame": {"x":0,"y":341,"w":16,"h":16}, 126 | "rotated": false, 127 | "trimmed": false, 128 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 129 | "sourceSize": {"w":16,"h":16} 130 | }, 131 | { 132 | "filename": "mario/swim3", 133 | "frame": {"x":0,"y":357,"w":16,"h":16}, 134 | "rotated": false, 135 | "trimmed": false, 136 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 137 | "sourceSize": {"w":16,"h":16} 138 | }, 139 | { 140 | "filename": "mario/swim4", 141 | "frame": {"x":0,"y":373,"w":16,"h":16}, 142 | "rotated": false, 143 | "trimmed": false, 144 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 145 | "sourceSize": {"w":16,"h":16} 146 | }, 147 | { 148 | "filename": "mario/swim5", 149 | "frame": {"x":0,"y":389,"w":16,"h":16}, 150 | "rotated": false, 151 | "trimmed": false, 152 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 153 | "sourceSize": {"w":16,"h":16} 154 | }, 155 | { 156 | "filename": "mario/swimSuper1", 157 | "frame": {"x":0,"y":405,"w":16,"h":32}, 158 | "rotated": false, 159 | "trimmed": false, 160 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 161 | "sourceSize": {"w":16,"h":32} 162 | }, 163 | { 164 | "filename": "mario/swimSuper2", 165 | "frame": {"x":0,"y":437,"w":16,"h":32}, 166 | "rotated": false, 167 | "trimmed": false, 168 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 169 | "sourceSize": {"w":16,"h":32} 170 | }, 171 | { 172 | "filename": "mario/swimSuper3", 173 | "frame": {"x":0,"y":469,"w":16,"h":32}, 174 | "rotated": false, 175 | "trimmed": false, 176 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 177 | "sourceSize": {"w":16,"h":32} 178 | }, 179 | { 180 | "filename": "mario/swimSuper4", 181 | "frame": {"x":0,"y":501,"w":16,"h":32}, 182 | "rotated": false, 183 | "trimmed": false, 184 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 185 | "sourceSize": {"w":16,"h":32} 186 | }, 187 | { 188 | "filename": "mario/swimSuper5", 189 | "frame": {"x":0,"y":533,"w":16,"h":32}, 190 | "rotated": false, 191 | "trimmed": false, 192 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 193 | "sourceSize": {"w":16,"h":32} 194 | }, 195 | { 196 | "filename": "mario/swimSuper6", 197 | "frame": {"x":0,"y":565,"w":16,"h":32}, 198 | "rotated": false, 199 | "trimmed": false, 200 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 201 | "sourceSize": {"w":16,"h":32} 202 | }, 203 | { 204 | "filename": "mario/turn", 205 | "frame": {"x":0,"y":597,"w":16,"h":16}, 206 | "rotated": false, 207 | "trimmed": false, 208 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 209 | "sourceSize": {"w":16,"h":16} 210 | }, 211 | { 212 | "filename": "mario/turnSuper", 213 | "frame": {"x":0,"y":613,"w":16,"h":32}, 214 | "rotated": false, 215 | "trimmed": false, 216 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 217 | "sourceSize": {"w":16,"h":32} 218 | }, 219 | { 220 | "filename": "mario/walk1", 221 | "frame": {"x":0,"y":645,"w":16,"h":16}, 222 | "rotated": false, 223 | "trimmed": false, 224 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 225 | "sourceSize": {"w":16,"h":16} 226 | }, 227 | { 228 | "filename": "mario/walk2", 229 | "frame": {"x":0,"y":661,"w":16,"h":16}, 230 | "rotated": false, 231 | "trimmed": false, 232 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 233 | "sourceSize": {"w":16,"h":16} 234 | }, 235 | { 236 | "filename": "mario/walk3", 237 | "frame": {"x":0,"y":677,"w":16,"h":16}, 238 | "rotated": false, 239 | "trimmed": false, 240 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":16}, 241 | "sourceSize": {"w":16,"h":16} 242 | }, 243 | { 244 | "filename": "mario/walkSuper1", 245 | "frame": {"x":0,"y":693,"w":16,"h":32}, 246 | "rotated": false, 247 | "trimmed": false, 248 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 249 | "sourceSize": {"w":16,"h":32} 250 | }, 251 | { 252 | "filename": "mario/walkSuper2", 253 | "frame": {"x":0,"y":725,"w":16,"h":32}, 254 | "rotated": false, 255 | "trimmed": false, 256 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 257 | "sourceSize": {"w":16,"h":32} 258 | }, 259 | { 260 | "filename": "mario/walkSuper3", 261 | "frame": {"x":0,"y":757,"w":16,"h":32}, 262 | "rotated": false, 263 | "trimmed": false, 264 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":32}, 265 | "sourceSize": {"w":16,"h":32} 266 | }, 267 | { 268 | "filename": "turtle/shell", 269 | "frame": {"x":0,"y":789,"w":16,"h":24}, 270 | "rotated": false, 271 | "trimmed": false, 272 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":24}, 273 | "sourceSize": {"w":16,"h":24} 274 | }, 275 | { 276 | "filename": "turtle/turtle0", 277 | "frame": {"x":0,"y":813,"w":16,"h":24}, 278 | "rotated": false, 279 | "trimmed": false, 280 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":24}, 281 | "sourceSize": {"w":16,"h":24} 282 | }, 283 | { 284 | "filename": "turtle/turtle1", 285 | "frame": {"x":0,"y":837,"w":16,"h":24}, 286 | "rotated": false, 287 | "trimmed": false, 288 | "spriteSourceSize": {"x":0,"y":0,"w":16,"h":24}, 289 | "sourceSize": {"w":16,"h":24} 290 | }], 291 | "meta": { 292 | "app": "http://www.codeandweb.com/texturepacker", 293 | "version": "1.0", 294 | "image": "mario-sprites.png", 295 | "format": "RGBA8888", 296 | "size": {"w":16,"h":861}, 297 | "scale": "1", 298 | "smartupdate": "$TexturePacker:SmartUpdate:f00a8ecbf2d04d70deec0a95f716e8cb:da7c41ddc8a557435ce0a49db46952be:4f58bece13d73f4757a743d8358f7b7b$" 299 | } 300 | } 301 | -------------------------------------------------------------------------------- /assets/mariobros/mario-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/mariobros/mario-sprites.png -------------------------------------------------------------------------------- /assets/music/overworld.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/music/overworld.mp3 -------------------------------------------------------------------------------- /assets/music/overworld.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/assets/music/overworld.ogg -------------------------------------------------------------------------------- /assets/plugins/AnimatedTiles.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define("AnimatedTiles", [], factory); 6 | else if(typeof exports === 'object') 7 | exports["AnimatedTiles"] = factory(); 8 | else 9 | root["AnimatedTiles"] = factory(); 10 | })(typeof self !== 'undefined' ? self : this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { 50 | /******/ configurable: false, 51 | /******/ enumerable: true, 52 | /******/ get: getter 53 | /******/ }); 54 | /******/ } 55 | /******/ }; 56 | /******/ 57 | /******/ // getDefaultExport function for compatibility with non-harmony modules 58 | /******/ __webpack_require__.n = function(module) { 59 | /******/ var getter = module && module.__esModule ? 60 | /******/ function getDefault() { return module['default']; } : 61 | /******/ function getModuleExports() { return module; }; 62 | /******/ __webpack_require__.d(getter, 'a', getter); 63 | /******/ return getter; 64 | /******/ }; 65 | /******/ 66 | /******/ // Object.prototype.hasOwnProperty.call 67 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 68 | /******/ 69 | /******/ // __webpack_public_path__ 70 | /******/ __webpack_require__.p = ""; 71 | /******/ 72 | /******/ // Load entry module and return exports 73 | /******/ return __webpack_require__(__webpack_require__.s = 0); 74 | /******/ }) 75 | /************************************************************************/ 76 | /******/ ([ 77 | /* 0 */ 78 | /***/ (function(module, exports, __webpack_require__) { 79 | 80 | "use strict"; 81 | 82 | 83 | /** 84 | * @author Niklas Berg 85 | * @copyright 2018 Niklas Berg 86 | * @license {@link https://github.com/nkholski/phaser3-animated-tiles/blob/master/LICENSE|MIT License} 87 | */ 88 | 89 | // 90 | // This plugin is based on Photonstorms Phaser 3 plugin template. 91 | // The template is ES5 compliant while the added code uses ES6 features, 92 | // but the plan is to turn it all into a ES6 Class. 93 | 94 | var AnimatedTiles = function AnimatedTiles(scene) { 95 | /* 96 | TODO: 97 | 1. Fix property names which is a mess after adding support for multiple maps, tilesets and layers. 98 | 2. Helper functions: Get mapIndex by passing a map (and maybe support it as argument to methods), Get layerIndex, get tile index from properties. 99 | 100 | */ 101 | 102 | // The Scene that owns this plugin 103 | this.scene = scene; 104 | 105 | this.systems = scene.sys; 106 | 107 | // TileMap the plugin belong to. 108 | // TODO: Array or object for multiple tilemaps support 109 | // TODO: reference to layers too, and which is activated or not 110 | this.map = null; 111 | 112 | // Array with all tiles to animate 113 | // TODO: Turn on and off certain tiles. 114 | this.animatedTiles = []; 115 | 116 | // Global playback rate 117 | this.rate = 1; 118 | 119 | // Should the animations play or not? 120 | this.active = false; 121 | 122 | // Should the animations play or not per layer. If global active is false this value makes no difference 123 | this.activeLayer = []; 124 | 125 | // Obey timescale? 126 | this.followTimeScale = true; 127 | 128 | if (!scene.sys.settings.isBooted) { 129 | scene.sys.events.once('boot', this.boot, this); 130 | } 131 | }; 132 | 133 | // Static function called by the PluginFile Loader. 134 | AnimatedTiles.register = function (PluginManager) { 135 | // Register this plugin with the PluginManager, so it can be added to Scenes. 136 | PluginManager.register('AnimatedTiles', AnimatedTiles, 'animatedTiles'); 137 | }; 138 | 139 | AnimatedTiles.prototype = { 140 | 141 | // Called when the Plugin is booted by the PluginManager. 142 | // If you need to reference other systems in the Scene (like the Loader or DisplayList) then set-up those references now, not in the constructor. 143 | boot: function boot() { 144 | var eventEmitter = this.systems.events; 145 | eventEmitter.on('postupdate', this.postUpdate, this); 146 | eventEmitter.on('shutdown', this.shutdown, this); 147 | eventEmitter.on('destroy', this.destroy, this); 148 | }, 149 | 150 | // Initilize support for animated tiles on given map 151 | init: function init(map) { 152 | var _this = this; 153 | 154 | // TODO: Check if map is initilized already, if so do it again but overwrite the old. 155 | var mapAnimData = this.getAnimatedTiles(map); 156 | var animatedTiles = { 157 | map: map, 158 | animatedTiles: mapAnimData, 159 | active: true, 160 | rate: 1, 161 | activeLayer: [] 162 | }; 163 | var i = 0; 164 | map.layers.forEach(function () { 165 | return animatedTiles.activeLayer.push(true); 166 | }); 167 | this.animatedTiles.push(animatedTiles); 168 | if (this.animatedTiles.length === 1) { 169 | this.active = true; // Start the animations by default 170 | } 171 | this.animatedTiles[this.animatedTiles.length - 1].animatedTiles.forEach(function (animatedTile) { 172 | animatedTile.tiles.forEach(function (layer) { 173 | _this.updateLayer(animatedTile, layer); 174 | }); 175 | }); 176 | }, 177 | 178 | setRate: function setRate(rate) { 179 | var gid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; 180 | var map = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; 181 | 182 | if (gid === null) { 183 | if (map === null) { 184 | this.rate = rate; 185 | } else { 186 | this.animatedTiles[map].rate = rate; 187 | } 188 | } else { 189 | var loopThrough = function loopThrough(animatedTiles) { 190 | animatedTiles.forEach(function (animatedTile) { 191 | if (animatedTile.index === gid) { 192 | animatedTile.rate = rate; 193 | } 194 | }); 195 | }; 196 | if (map === null) { 197 | this.animatedTiles.forEach(function (animatedTiles) { 198 | loopThrough(animatedTiles.animatedTiles); 199 | }); 200 | } else { 201 | loopThrough(this.animatedTiles[map].animatedTiles); 202 | } 203 | } 204 | // if tile is number (gid) --> set rate for that tile 205 | // TODO: if passing an object -> check properties matching object and set rate 206 | }, 207 | 208 | 209 | resetRates: function resetRates() { 210 | var mapIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; 211 | 212 | if (mapIndex === null) { 213 | this.rate = 1; 214 | this.animatedTiles.forEach(function (mapAnimData) { 215 | mapAnimData.rate = 1; 216 | mapAnimData.animatedTiles.forEach(function (tileAnimData) { 217 | tileAnimData.rate = 1; 218 | }); 219 | }); 220 | } else { 221 | this.animatedTiles[mapIndex].rate = 1; 222 | this.animatedTiles[mapIndex].animatedTiles.forEach(function (tileAnimData) { 223 | tileAnimData.rate = 1; 224 | }); 225 | } 226 | }, 227 | 228 | // Start (or resume) animations 229 | resume: function resume() { 230 | var _this2 = this; 231 | 232 | var layerIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; 233 | var mapIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; 234 | 235 | var scope = mapIndex === null ? this : this.animatedTiles[mapIndex]; 236 | if (layerIndex === null) { 237 | scope.active = true; 238 | } else { 239 | scope.activeLayer[layerIndex] = true; 240 | scope.animatedTiles.forEach(function (animatedTile) { 241 | _this2.updateLayer(animatedTile, animatedTile.tiles[layerIndex]); 242 | }); 243 | } 244 | }, 245 | 246 | // Stop (or pause) animations 247 | pause: function pause() { 248 | var layerIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; 249 | var mapIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; 250 | 251 | var scope = mapIndex === null ? this : this.animatedTiles[mapIndex]; 252 | if (layerIndex === null) { 253 | scope.active = false; 254 | } else { 255 | scope.activeLayer[layerIndex] = false; 256 | } 257 | }, 258 | 259 | postUpdate: function postUpdate(time, delta) { 260 | var _this3 = this; 261 | 262 | if (!this.active) { 263 | return; 264 | } 265 | // Elapsed time is the delta multiplied by the global rate and the scene timeScale if folowTimeScale is true 266 | var globalElapsedTime = delta * this.rate * (this.followTimeScale ? this.scene.time.timeScale : 1); 267 | this.animatedTiles.forEach(function (mapAnimData) { 268 | if (!mapAnimData.active) { 269 | return; 270 | } 271 | // Multiply with rate for this map 272 | var elapsedTime = globalElapsedTime * mapAnimData.rate; 273 | mapAnimData.animatedTiles.forEach(function (animatedTile) { 274 | // Reduce time for current tile, multiply elapsedTime with this tile's private rate 275 | animatedTile.next -= elapsedTime * animatedTile.rate; 276 | // Time for current tile is up!!! 277 | if (animatedTile.next < 0) { 278 | // Remember current frame index 279 | var currentIndex = animatedTile.currentFrame; 280 | // Remember the tileId of current tile 281 | var oldTileId = animatedTile.frames[currentIndex].tileid; 282 | // Advance to next in line 283 | var newIndex = currentIndex + 1; 284 | // If we went beyond last frame, we just start over 285 | if (newIndex > animatedTile.frames.length - 1) { 286 | newIndex = 0; 287 | } 288 | // Set lifelength for current frame 289 | animatedTile.next = animatedTile.frames[newIndex].duration; 290 | // Set index of current frame 291 | animatedTile.currentFrame = newIndex; 292 | // Store the tileId (gid) we will shift to 293 | // Loop through all tiles (via layers) 294 | //this.updateLayer 295 | animatedTile.tiles.forEach(function (layer, layerIndex) { 296 | if (!mapAnimData.activeLayer[layerIndex]) { 297 | return; 298 | } 299 | _this3.updateLayer(animatedTile, layer, oldTileId); 300 | }); 301 | } 302 | }); // animData loop 303 | }); // Map loop 304 | }, 305 | 306 | updateLayer: function updateLayer(animatedTile, layer) { 307 | var oldTileId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1; 308 | 309 | var tilesToRemove = []; 310 | var tileId = animatedTile.frames[animatedTile.currentFrame].tileid; 311 | layer.forEach(function (tile) { 312 | // If the tile is removed or has another index than expected, it's 313 | // no longer animated. Mark for removal. 314 | if (oldTileId > -1 && (tile === null || tile.index !== oldTileId)) { 315 | tilesToRemove.push(tile); 316 | } else { 317 | // Finally we set the index of the tile to the one specified by current frame!!! 318 | tile.index = tileId; 319 | } 320 | }); 321 | // Remove obselete tiles 322 | tilesToRemove.forEach(function (tile) { 323 | var pos = layer.indexOf(tile); 324 | if (pos > -1) { 325 | layer.splice(pos, 1); 326 | } else { 327 | console.error("This shouldn't happen. Not at all. Blame Phaser Animated Tiles plugin. You'll be fine though."); 328 | } 329 | }); 330 | }, 331 | 332 | 333 | // Called when a Scene shuts down, it may then come back again later (which will invoke the 'start' event) but should be considered dormant. 334 | shutdown: function shutdown() {}, 335 | 336 | // Called when a Scene is destroyed by the Scene Manager. There is no coming back from a destroyed Scene, so clear up all resources here. 337 | destroy: function destroy() { 338 | this.shutdown(); 339 | this.scene = undefined; 340 | }, 341 | 342 | getAnimatedTiles: function getAnimatedTiles(map) { 343 | var _this4 = this; 344 | 345 | // this.animatedTiles is an array of objects with information on how to animate and which tiles. 346 | var animatedTiles = []; 347 | // loop through all tilesets 348 | map.tilesets.forEach( 349 | // Go through the data stored on each tile (not tile on the tilemap but tile in the tileset) 350 | function (tileset) { 351 | var tileData = tileset.tileData; 352 | Object.keys(tileData).forEach(function (index) { 353 | index = parseInt(index); 354 | // If tile has animation info we'll dive into it 355 | if (tileData[index].hasOwnProperty("animation")) { 356 | console.log("gid:",index, tileset.firstgid); 357 | var animatedTileData = { 358 | index: index + tileset.firstgid, // gid of the original tile 359 | frames: [], // array of frames 360 | currentFrame: 0, // start on first frame 361 | tiles: [], // array with one array per layer with list of tiles that depends on this animation data 362 | rate: 1 // multiplier, set to 2 for double speed or 0.25 quarter speed 363 | }; 364 | // push all frames to the animatedTileData 365 | tileData[index].animation.forEach(function (frameData) { 366 | let frame = { 367 | duration: frameData.duration, 368 | tileid: frameData.tileid+tileset.firstgid 369 | }; 370 | animatedTileData.frames.push(frame); 371 | }); 372 | // time until jumping to next frame 373 | animatedTileData.next = animatedTileData.frames[0].duration; 374 | // Go through all layers for tiles 375 | map.layers.forEach(function (layer) { 376 | if (layer.tilemapLayer.type === "StaticTilemapLayer") { 377 | // We just push an empty array if the layer is static (impossible to animate). 378 | // If we just skip the layer, the layer order will be messed up 379 | // when updating animated tiles and things will look awful. 380 | animatedTileData.tiles.push([]); 381 | return; 382 | } 383 | // tiles array for current layer 384 | var tiles = []; 385 | // loop through all rows with tiles... 386 | layer.data.forEach(function (tileRow) { 387 | // ...and loop through all tiles in that row 388 | tileRow.forEach(function (tile) { 389 | // Tiled start index for tiles with 1 but animation with 0. Thus that wierd "-1" 390 | if (tile.index - tileset.firstgid === index) { 391 | tiles.push(tile); 392 | console.log(tile,animatedTileData); 393 | } 394 | }); 395 | }); 396 | // add the layer's array with tiles to the tiles array. 397 | // this will make it possible to control layers individually in the future 398 | animatedTileData.tiles.push(tiles); 399 | }); 400 | // animatedTileData is finished for current animation, push it to the animatedTiles-property of the plugin 401 | animatedTiles.push(animatedTileData); 402 | } 403 | }); 404 | }); 405 | map.layers.forEach(function (layer, layerIndex) { 406 | // layer indices array of booleans whether to animate tiles on layer or not 407 | _this4.activeLayer[layerIndex] = true; 408 | }); 409 | 410 | return animatedTiles; 411 | }, 412 | 413 | putTileAt: function putTileAt(layer, tile, x, y) { 414 | // Replaces putTileAt of the native API, but updates the list of animatedTiles in the process. 415 | // No need to call updateAnimatedTiles as required for other modificatons of the tile-map 416 | }, 417 | updateAnimatedTiles: function updateAnimatedTiles() { 418 | // future args: x=null, y=null, w=null, h=null, container=null 419 | var x = null, 420 | y = null, 421 | w = null, 422 | h = null, 423 | container = null; 424 | // 1. If no container, loop through all initilized maps 425 | if (container === null) { 426 | container = []; 427 | this.animatedTiles.forEach(function (mapAnimData) { 428 | container.push(mapAnimData); 429 | }); 430 | } 431 | // 2. If container is a map, loop through it's layers 432 | // container = [container]; 433 | 434 | // 1 & 2: Update the map(s) 435 | container.forEach(function (mapAnimData) { 436 | var chkX = x !== null ? x : 0; 437 | var chkY = y !== null ? y : 0; 438 | var chkW = w !== null ? mapAnimData.map.width : 10; 439 | var chkH = h !== null ? mapAnimData.map.height : 10; 440 | 441 | mapAnimData.animatedTiles.forEach(function (tileAnimData) { 442 | tileAnimData.tiles.forEach(function (tiles, layerIndex) { 443 | var layer = mapAnimData.map.layers[layerIndex]; 444 | if (layer.type === "StaticTilemapLayer") { 445 | return; 446 | } 447 | for (var _x9 = chkX; _x9 < chkX + chkW; _x9++) { 448 | for (var _y = chkY; _y < chkY + chkH; _y++) { 449 | var tile = mapAnimData.map.layers[layerIndex].data[_x9][_y]; 450 | // should this tile be animated? 451 | if (tile.index == tileAnimData.index) { 452 | // is it already known? if not, add it to the list 453 | if (tiles.indexOf(tile) === -1) { 454 | tiles.push(tile); 455 | } 456 | // update index to match current fram of this animation 457 | tile.index = tileAnimData.frames[tileAnimData.currentFrame].tileid; 458 | } 459 | } 460 | } 461 | }); 462 | }); 463 | }); 464 | // 3. If container is a layer, just loop through it's tiles 465 | } 466 | }; 467 | 468 | AnimatedTiles.prototype.constructor = AnimatedTiles; 469 | 470 | module.exports = AnimatedTiles; 471 | 472 | /***/ }) 473 | /******/ ]); 474 | }); -------------------------------------------------------------------------------- /assets/plugins/AnimatedTiles.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("AnimatedTiles",[],e):"object"==typeof exports?exports.AnimatedTiles=e():t.AnimatedTiles=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,i){"use strict";/** 2 | * @author Niklas Berg 3 | * @copyright 2018 Niklas Berg 4 | * @license {@link https://github.com/nkholski/phaser3-animated-tiles/blob/master/LICENSE|MIT License} 5 | */ 6 | var n=function(t){this.scene=t,this.systems=t.sys,this.map=null,this.animatedTiles=[],this.rate=1,this.active=!1,this.activeLayer=[],this.followTimeScale=!0,t.sys.settings.isBooted||t.sys.events.once("boot",this.boot,this)};n.register=function(t){t.register("AnimatedTiles",n,"animatedTiles")},n.prototype={boot:function(){var t=this.systems.events;t.on("postupdate",this.postUpdate,this),t.on("shutdown",this.shutdown,this),t.on("destroy",this.destroy,this)},init:function(t){var e=this.getAnimatedTiles(t),i={map:t,animatedTiles:e,active:!0,rate:1,activeLayer:[]};t.layers.forEach(function(){return i.activeLayer.push(!0)}),this.animatedTiles.push(i),1===this.animatedTiles.length&&(this.active=!0)},setRate:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;if(null===e)null===i?this.rate=t:this.animatedTiles[i].rate=t;else{var n=function(i){i.forEach(function(i){i.index===e&&(i.rate=t)})};null===i?this.animatedTiles.forEach(function(t){n(t.animatedTiles)}):n(this.animatedTiles[i].animatedTiles)}},resetRates:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t?(this.rate=1,this.animatedTiles.forEach(function(t){t.rate=1,t.animatedTiles.forEach(function(t){t.rate=1})})):(this.animatedTiles[t].rate=1,this.animatedTiles[t].animatedTiles.forEach(function(t){t.rate=1}))},resume:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=null===i?this:this.animatedTiles[i];null===e?n.active=!0:(n.activeLayer[e]=!0,n.animatedTiles.forEach(function(i){t.updateLayer(i,i.tiles[e])}))},pause:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=null===e?this:this.animatedTiles[e];null===t?i.active=!1:i.activeLayer[t]=!1},postUpdate:function(t,e){var i=this;if(this.active){var n=e*this.rate*(this.followTimeScale?this.scene.time.timeScale:1);this.animatedTiles.forEach(function(t){if(t.active){var e=n*t.rate;t.animatedTiles.forEach(function(n){if(n.next-=e*n.rate,n.next<0){var a=n.currentFrame,r=n.frames[a].tileid,s=a+1;s>n.frames.length-1&&(s=0),n.next=n.frames[s].duration,n.currentFrame=s,n.tiles.forEach(function(e,a){t.activeLayer[a]&&i.updateLayer(n,e,r)})}})}})}},updateLayer:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:-1,n=[],a=t.frames[t.currentFrame].tileid;e.forEach(function(t){i>-1&&(null===t||t.index!==i)?n.push(t):t.index=a}),n.forEach(function(t){var i=e.indexOf(t);i>-1?e.splice(i,1):console.error("This shouldn't happen. Not at all. Blame Phaser Animated Tiles plugin. You'll be fine though.")})},shutdown:function(){},destroy:function(){this.shutdown(),this.scene=void 0},getAnimatedTiles:function(t){var e=this,i=[];return t.tilesets.forEach(function(e){var n=e.tileData;Object.keys(n).forEach(function(a){if(a=parseInt(a),n[a].hasOwnProperty("animation")){var r={index:a+e.firstgid,frames:[],currentFrame:0,tiles:[],rate:1};n[a].animation.forEach(function(t){var i={duration:t.duration,tileid:t.tileid+e.firstgid};r.frames.push(i)}),r.next=r.frames[0].duration,t.layers.forEach(function(t){if("StaticTilemapLayer"===t.tilemapLayer.type)return void r.tiles.push([]);var i=[];t.data.forEach(function(t){t.forEach(function(t){t.index-e.firstgid===a&&i.push(t)})}),r.tiles.push(i)}),i.push(r)}})}),t.layers.forEach(function(t,i){e.activeLayer[i]=!0}),i},putTileAt:function(t,e,i,n){},updateAnimatedTiles:function(){var t=null;null===t&&(t=[],this.animatedTiles.forEach(function(e){t.push(e)})),t.forEach(function(t){t.animatedTiles.forEach(function(e){e.tiles.forEach(function(i,n){if("StaticTilemapLayer"!==t.map.layers[n].type)for(var a=0;a<10;a++)for(var r=0;r<10;r++){var s=t.map.layers[n].data[a][r];s.index==e.index&&(-1===i.indexOf(s)&&i.push(s),s.index=e.frames[e.currentFrame].tileid)}})})})}},n.prototype.constructor=n,t.exports=n}])}); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser3 - ES6 - Webpack 7 | 8 | 9 | 10 | 11 | 12 | 26 | 27 | 28 | 29 |
Phaser 3 Generic Platformer example | Show/hide touch controls | Source code on Github (migth be ahead/behind this example) | Animated tiles plugin
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Phaser3ES6Webpack", 3 | "version": "1.1.0", 4 | "description": "", 5 | "author": "niklas berg ", 6 | "main": "index.js", 7 | "scripts": { 8 | "dev": "webpack --mode=development", 9 | "deploy": "webpack --mode=production --config webpack.production.config.js", 10 | "test": "eslint ./src/**/**.js" 11 | }, 12 | "license": "MIT", 13 | "devDependencies": { 14 | "@babel/core": "^7.3.4", 15 | "@babel/polyfill": "^7.0.0", 16 | "@babel/preset-env": "^7.3.4", 17 | "babel-eslint": "^9.0.0", 18 | "babel-loader": "^8.0.0", 19 | "browser-sync": "^2.26.3", 20 | "browser-sync-webpack-plugin": "^2.2.2", 21 | "clean-webpack-plugin": "^0.1.19", 22 | "copy-webpack-plugin": "^4.5.2", 23 | "eslint": "^5.15.0", 24 | "eslint-plugin-import": "^2.14.0", 25 | "expose-loader": "^0.7.5", 26 | "html-webpack-plugin": "^3.2.0", 27 | "raw-loader": "^0.5.1", 28 | "webpack": "^4.18.0", 29 | "webpack-cli": "^3.1.0" 30 | }, 31 | "dependencies": { 32 | "eslint-config-standard": "^12.0.0", 33 | "eslint-plugin-node": "^8.0.1", 34 | "eslint-plugin-promise": "^4.0.1", 35 | "eslint-plugin-standard": "^4.0.0", 36 | "phaser": "3.12.0", 37 | "phaser-animated-tiles": "^2.0.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /rawAssets/gimp/coin.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/coin.xcf -------------------------------------------------------------------------------- /rawAssets/gimp/fire.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/fire.xcf -------------------------------------------------------------------------------- /rawAssets/gimp/firemario.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/firemario.xcf -------------------------------------------------------------------------------- /rawAssets/gimp/flower.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/flower.xcf -------------------------------------------------------------------------------- /rawAssets/gimp/goomba.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/goomba.xcf -------------------------------------------------------------------------------- /rawAssets/gimp/powerups.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/powerups.xcf -------------------------------------------------------------------------------- /rawAssets/gimp/trampoline.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/gimp/trampoline.xcf -------------------------------------------------------------------------------- /rawAssets/mario-sprites.tps: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | fileFormatVersion 5 | 4 6 | texturePackerVersion 7 | 4.6.1 8 | fileName 9 | /home/niklas/projekt/mario2.8.0/rawAssets/mario-sprites.tps 10 | autoSDSettings 11 | 12 | 13 | scale 14 | 1 15 | extension 16 | 17 | spriteFilter 18 | 19 | acceptFractionalValues 20 | 21 | maxTextureSize 22 | 23 | width 24 | -1 25 | height 26 | -1 27 | 28 | 29 | 30 | allowRotation 31 | 32 | shapeDebug 33 | 34 | dpi 35 | 72 36 | dataFormat 37 | phaser-json-array 38 | textureFileName 39 | ../assets/mario-sprites.png 40 | flipPVR 41 | 42 | pvrCompressionQuality 43 | PVR_QUALITY_NORMAL 44 | atfCompressData 45 | 46 | mipMapMinSize 47 | 32768 48 | etc1CompressionQuality 49 | ETC1_QUALITY_LOW_PERCEPTUAL 50 | etc2CompressionQuality 51 | ETC2_QUALITY_LOW_PERCEPTUAL 52 | dxtCompressionMode 53 | DXT_PERCEPTUAL 54 | jxrColorFormat 55 | JXR_YUV444 56 | jxrTrimFlexBits 57 | 0 58 | jxrCompressionLevel 59 | 0 60 | ditherType 61 | NearestNeighbour 62 | backgroundColor 63 | 0 64 | libGdx 65 | 66 | filtering 67 | 68 | x 69 | Linear 70 | y 71 | Linear 72 | 73 | 74 | shapePadding 75 | 0 76 | jpgQuality 77 | 80 78 | pngOptimizationLevel 79 | 0 80 | webpQualityLevel 81 | 101 82 | textureSubPath 83 | 84 | atfFormats 85 | 86 | textureFormat 87 | png 88 | borderPadding 89 | 0 90 | maxTextureSize 91 | 92 | width 93 | 2048 94 | height 95 | 2048 96 | 97 | fixedTextureSize 98 | 99 | width 100 | -1 101 | height 102 | -1 103 | 104 | algorithmSettings 105 | 106 | algorithm 107 | Basic 108 | freeSizeMode 109 | Best 110 | sizeConstraints 111 | AnySize 112 | forceSquared 113 | 114 | maxRects 115 | 116 | heuristic 117 | Best 118 | 119 | basic 120 | 121 | sortBy 122 | Best 123 | order 124 | Ascending 125 | 126 | polygon 127 | 128 | alignToGrid 129 | 1 130 | 131 | 132 | andEngine 133 | 134 | minFilter 135 | Linear 136 | packageName 137 | Texture 138 | wrap 139 | 140 | s 141 | Clamp 142 | t 143 | Clamp 144 | 145 | magFilter 146 | MagLinear 147 | 148 | dataFileNames 149 | 150 | data 151 | 152 | name 153 | ../assets/mario-sprites.json 154 | 155 | 156 | multiPack 157 | 158 | forceIdenticalLayout 159 | 160 | outputFormat 161 | RGBA8888 162 | alphaHandling 163 | ClearTransparentPixels 164 | contentProtection 165 | 166 | key 167 | 168 | 169 | autoAliasEnabled 170 | 171 | trimSpriteNames 172 | 173 | prependSmartFolderName 174 | 175 | autodetectAnimations 176 | 177 | globalSpriteSettings 178 | 179 | scale 180 | 1 181 | scaleMode 182 | Smooth 183 | extrude 184 | 0 185 | trimThreshold 186 | 1 187 | trimMargin 188 | 1 189 | trimMode 190 | None 191 | tracerTolerance 192 | 200 193 | heuristicMask 194 | 195 | defaultPivotPoint 196 | 0.5,0.5 197 | writePivotPoints 198 | 199 | 200 | individualSpriteSettings 201 | 202 | sprites/brick.png 203 | 204 | pivotPoint 205 | 0.5,0.5 206 | scale9Enabled 207 | 208 | scale9Borders 209 | 2,1,5,3 210 | scale9Paddings 211 | 2,1,5,3 212 | scale9FromFile 213 | 214 | 215 | sprites/coin/coin1.png 216 | sprites/coin/coin2.png 217 | sprites/coin/coin3.png 218 | sprites/coin/spin1.png 219 | sprites/coin/spin2.png 220 | sprites/coin/spin3.png 221 | sprites/coin/spin4.png 222 | 223 | pivotPoint 224 | 0.5,0.5 225 | scale9Enabled 226 | 227 | scale9Borders 228 | 3,4,5,7 229 | scale9Paddings 230 | 3,4,5,7 231 | scale9FromFile 232 | 233 | 234 | sprites/controller/button.png 235 | 236 | pivotPoint 237 | 0.5,0.5 238 | scale9Enabled 239 | 240 | scale9Borders 241 | 11,10,21,21 242 | scale9Paddings 243 | 11,10,21,21 244 | scale9FromFile 245 | 246 | 247 | sprites/controller/dpad.png 248 | 249 | pivotPoint 250 | 0.5,0.5 251 | scale9Enabled 252 | 253 | scale9Borders 254 | 19,19,37,37 255 | scale9Paddings 256 | 19,19,37,37 257 | scale9FromFile 258 | 259 | 260 | sprites/fire/explode1.png 261 | sprites/fire/explode2.png 262 | sprites/fire/explode3.png 263 | sprites/flag.png 264 | sprites/goomba/flat.png 265 | sprites/goomba/walk1.png 266 | sprites/goomba/walk2.png 267 | sprites/mario/climb0.png 268 | sprites/mario/climb1.png 269 | sprites/mario/dead.png 270 | sprites/mario/jump.png 271 | sprites/mario/stand.png 272 | sprites/mario/swim1.png 273 | sprites/mario/swim2.png 274 | sprites/mario/swim3.png 275 | sprites/mario/swim4.png 276 | sprites/mario/swim5.png 277 | sprites/mario/turn.png 278 | sprites/mario/walk1.png 279 | sprites/mario/walk2.png 280 | sprites/mario/walk3.png 281 | sprites/powerup/1up.png 282 | sprites/powerup/flower1.png 283 | sprites/powerup/flower2.png 284 | sprites/powerup/flower3.png 285 | sprites/powerup/flower4.png 286 | sprites/powerup/star1.png 287 | sprites/powerup/star2.png 288 | sprites/powerup/star3.png 289 | sprites/powerup/star4.png 290 | sprites/powerup/super.png 291 | 292 | pivotPoint 293 | 0.5,0.5 294 | scale9Enabled 295 | 296 | scale9Borders 297 | 4,4,8,8 298 | scale9Paddings 299 | 4,4,8,8 300 | scale9FromFile 301 | 302 | 303 | sprites/fire/fly1.png 304 | sprites/fire/fly2.png 305 | sprites/fire/fly3.png 306 | sprites/fire/fly4.png 307 | sprites/other/cloud.png 308 | sprites/other/platform.png 309 | 310 | pivotPoint 311 | 0.5,0.5 312 | scale9Enabled 313 | 314 | scale9Borders 315 | 2,2,4,4 316 | scale9Paddings 317 | 2,2,4,4 318 | scale9FromFile 319 | 320 | 321 | sprites/mario/bend.png 322 | sprites/mario/bendFire.png 323 | sprites/mario/climbFire0.png 324 | sprites/mario/climbFire1.png 325 | sprites/mario/climbSuper0.png 326 | sprites/mario/climbSuper1.png 327 | sprites/mario/fire.png 328 | sprites/mario/half.png 329 | sprites/mario/jumpFire.png 330 | sprites/mario/jumpSuper.png 331 | sprites/mario/standFire.png 332 | sprites/mario/standSuper.png 333 | sprites/mario/swimFire1.png 334 | sprites/mario/swimFire2.png 335 | sprites/mario/swimFire3.png 336 | sprites/mario/swimFire4.png 337 | sprites/mario/swimFire5.png 338 | sprites/mario/swimFire6.png 339 | sprites/mario/swimSuper1.png 340 | sprites/mario/swimSuper2.png 341 | sprites/mario/swimSuper3.png 342 | sprites/mario/swimSuper4.png 343 | sprites/mario/swimSuper5.png 344 | sprites/mario/swimSuper6.png 345 | sprites/mario/turnFire.png 346 | sprites/mario/turnSuper.png 347 | sprites/mario/walkFire1.png 348 | sprites/mario/walkFire2.png 349 | sprites/mario/walkFire3.png 350 | sprites/mario/walkSuper1.png 351 | sprites/mario/walkSuper2.png 352 | sprites/mario/walkSuper3.png 353 | sprites/other/trampoline1.png 354 | sprites/other/trampoline2.png 355 | sprites/other/trampoline3.png 356 | 357 | pivotPoint 358 | 0.5,0.5 359 | scale9Enabled 360 | 361 | scale9Borders 362 | 4,8,8,16 363 | scale9Paddings 364 | 4,8,8,16 365 | scale9FromFile 366 | 367 | 368 | sprites/title.png 369 | 370 | pivotPoint 371 | 0.5,0.5 372 | scale9Enabled 373 | 374 | scale9Borders 375 | 44,22,88,44 376 | scale9Paddings 377 | 44,22,88,44 378 | scale9FromFile 379 | 380 | 381 | sprites/turtle/shell.png 382 | sprites/turtle/turtle0.png 383 | sprites/turtle/turtle1.png 384 | 385 | pivotPoint 386 | 0.5,0.5 387 | scale9Enabled 388 | 389 | scale9Borders 390 | 4,6,8,12 391 | scale9Paddings 392 | 4,6,8,12 393 | scale9FromFile 394 | 395 | 396 | 397 | fileList 398 | 399 | sprites 400 | 401 | ignoreFileList 402 | 403 | replaceList 404 | 405 | ignoredWarnings 406 | 407 | commonDivisorX 408 | 1 409 | commonDivisorY 410 | 1 411 | packNormalMaps 412 | 413 | autodetectNormalMaps 414 | 415 | normalMapFilter 416 | 417 | normalMapSuffix 418 | 419 | normalMapSheetFileName 420 | 421 | exporterProperties 422 | 423 | 424 | 425 | -------------------------------------------------------------------------------- /rawAssets/sfx/smb_1-up.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_1-up.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_bowserfalls.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_bowserfalls.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_breakblock.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_breakblock.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_bump.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_bump.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_coin.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_coin.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_fireball.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_fireball.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_fireworks.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_fireworks.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_flagpole.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_flagpole.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_gameover.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_gameover.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_jump-small.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_jump-small.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_jump-super.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_jump-super.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_kick.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_mariodie.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_mariodie.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_pause.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_pause.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_pipe.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_pipe.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_powerup.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_powerup.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_powerup_appears.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_powerup_appears.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_stage_clear.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_stage_clear.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_stomp.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_stomp.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_vine.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_vine.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_warning.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_warning.wav -------------------------------------------------------------------------------- /rawAssets/sfx/smb_world_clear.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sfx/smb_world_clear.wav -------------------------------------------------------------------------------- /rawAssets/smb-phaser3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/smb-phaser3.gif -------------------------------------------------------------------------------- /rawAssets/sprites/brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/brick.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/coin1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/coin1.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/coin2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/coin2.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/coin3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/coin3.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/spin1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/spin1.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/spin2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/spin2.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/spin3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/spin3.png -------------------------------------------------------------------------------- /rawAssets/sprites/coin/spin4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/coin/spin4.png -------------------------------------------------------------------------------- /rawAssets/sprites/controller/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/controller/button.png -------------------------------------------------------------------------------- /rawAssets/sprites/controller/dpad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/controller/dpad.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/explode1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/explode1.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/explode2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/explode2.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/explode3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/explode3.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/fly1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/fly1.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/fly2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/fly2.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/fly3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/fly3.png -------------------------------------------------------------------------------- /rawAssets/sprites/fire/fly4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/fire/fly4.png -------------------------------------------------------------------------------- /rawAssets/sprites/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/flag.png -------------------------------------------------------------------------------- /rawAssets/sprites/goomba/flat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/goomba/flat.png -------------------------------------------------------------------------------- /rawAssets/sprites/goomba/walk1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/goomba/walk1.png -------------------------------------------------------------------------------- /rawAssets/sprites/goomba/walk2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/goomba/walk2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/bend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/bend.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/bendFire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/bendFire.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/bendSuper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/bendSuper.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/climb0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/climb0.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/climb1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/climb1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/climbFire0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/climbFire0.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/climbFire1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/climbFire1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/climbSuper0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/climbSuper0.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/climbSuper1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/climbSuper1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/dead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/dead.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/fire.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/half.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/half.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/jump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/jump.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/jumpFire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/jumpFire.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/jumpSuper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/jumpSuper.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/stand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/stand.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/standFire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/standFire.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/standSuper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/standSuper.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swim1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swim1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swim2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swim2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swim3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swim3.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swim4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swim4.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swim5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swim5.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimFire1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimFire1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimFire2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimFire2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimFire3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimFire3.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimFire4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimFire4.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimFire5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimFire5.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimFire6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimFire6.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimSuper1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimSuper1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimSuper2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimSuper2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimSuper3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimSuper3.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimSuper4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimSuper4.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimSuper5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimSuper5.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/swimSuper6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/swimSuper6.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/turn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/turn.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/turnFire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/turnFire.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/turnSuper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/turnSuper.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walk1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walk1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walk2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walk2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walk3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walk3.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walkFire1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walkFire1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walkFire2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walkFire2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walkFire3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walkFire3.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walkSuper1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walkSuper1.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walkSuper2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walkSuper2.png -------------------------------------------------------------------------------- /rawAssets/sprites/mario/walkSuper3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/mario/walkSuper3.png -------------------------------------------------------------------------------- /rawAssets/sprites/other/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/other/cloud.png -------------------------------------------------------------------------------- /rawAssets/sprites/other/platform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/other/platform.png -------------------------------------------------------------------------------- /rawAssets/sprites/other/trampoline1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/other/trampoline1.png -------------------------------------------------------------------------------- /rawAssets/sprites/other/trampoline2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/other/trampoline2.png -------------------------------------------------------------------------------- /rawAssets/sprites/other/trampoline3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/other/trampoline3.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/1up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/1up.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/flower1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/flower1.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/flower2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/flower2.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/flower3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/flower3.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/flower4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/flower4.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/star1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/star1.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/star2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/star2.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/star3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/star3.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/star4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/star4.png -------------------------------------------------------------------------------- /rawAssets/sprites/powerup/super.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/powerup/super.png -------------------------------------------------------------------------------- /rawAssets/sprites/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/title.png -------------------------------------------------------------------------------- /rawAssets/sprites/turtle/shell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/turtle/shell.png -------------------------------------------------------------------------------- /rawAssets/sprites/turtle/turtle0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/turtle/turtle0.png -------------------------------------------------------------------------------- /rawAssets/sprites/turtle/turtle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites/turtle/turtle1.png -------------------------------------------------------------------------------- /rawAssets/sprites_source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/sprites_source.png -------------------------------------------------------------------------------- /rawAssets/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/title.png -------------------------------------------------------------------------------- /rawAssets/titlescreen.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nkholski/phaser3-es6-webpack/3ce987c4caaa48946daee0479d689b56dbe1ebf7/rawAssets/titlescreen.xcf -------------------------------------------------------------------------------- /src/helpers/animations.js: -------------------------------------------------------------------------------- 1 | export default function makeAnimations(scene) { 2 | // TONS of animations. Everything animation-related is ugly and stupid below. 3 | // TODO: maybe use JSON to load animations 4 | let config = { 5 | key: 'brickTile', 6 | frames: scene.anims.generateFrameNumbers('tiles', { 7 | start: 14, 8 | end: 14, 9 | first: 14 10 | }) 11 | }; 12 | scene.anims.create(config); 13 | config = { 14 | key: 'blockTile', 15 | frames: scene.anims.generateFrameNumbers('tiles', { 16 | start: 43, 17 | end: 43, 18 | first: 43 19 | }) 20 | }; 21 | scene.anims.create(config); 22 | 23 | // Mario animations: One without suffix, super after mushroom and fire after flower 24 | ['', 'Super', 'Fire'].forEach((suffix) => { 25 | config = { 26 | key: 'run' + suffix, 27 | frames: scene.anims.generateFrameNames('mario-sprites', { 28 | prefix: 'mario/walk' + suffix, 29 | start: 1, 30 | end: 3 31 | }), 32 | frameRate: 10, 33 | repeat: -1, 34 | repeatDelay: 0 35 | }; 36 | scene.anims.create(config); 37 | 38 | // Jump, Stand and Turn: one frame each 39 | ['jump', 'stand', 'turn', 'bend'].forEach( 40 | (anim) => { 41 | if (anim === 'bend' && suffix === '') { 42 | // No bend animation when Mario is small 43 | return; 44 | } 45 | config.key = anim + suffix; 46 | config.frames = [{ 47 | frame: 'mario/' + anim + suffix, 48 | key: 'mario-sprites' 49 | }]; 50 | scene.anims.create(config); 51 | } 52 | ); 53 | 54 | // Climb 55 | config.key = 'climb' + suffix; 56 | config.frames = scene.anims.generateFrameNames('mario-sprites', { 57 | prefix: 'mario/climb' + suffix, 58 | start: 1, 59 | end: 2 60 | }); 61 | scene.anims.create(config); 62 | 63 | // Swim 64 | config.key = 'swim' + suffix; 65 | config.frames = scene.anims.generateFrameNames('mario-sprites', { 66 | prefix: 'mario/swim' + suffix, 67 | start: 1, 68 | end: 6 69 | }); 70 | scene.anims.create(config); 71 | }); 72 | 73 | config.key = 'death'; 74 | config.frames = scene.anims.generateFrameNumbers('mario', { 75 | start: 22, 76 | end: 22 77 | }); 78 | scene.anims.create(config); 79 | 80 | // Didn't find a good way to create an animation with frame names without a pattern. 81 | let frames = []; 82 | (['mario/half', 'mario/stand', 'mario/half', 'mario/standSuper', 'mario/half', 'mario/standSuper']).forEach( 83 | frame => { 84 | frames.push({ 85 | frame, 86 | key: 'mario-sprites' 87 | }); 88 | } 89 | ); 90 | config = { 91 | key: 'grow', 92 | frames: frames, 93 | frameRate: 10, 94 | repeat: 0, 95 | repeatDelay: 0 96 | }; 97 | scene.anims.create(config); 98 | config = { 99 | key: 'shrink', 100 | frames: frames.reverse(), 101 | frameRate: 10, 102 | repeat: 0, 103 | repeatDelay: 0 104 | }; 105 | scene.anims.create(config); 106 | 107 | // ALL MARIO ANIMATIONS DONE 108 | 109 | config = { 110 | key: 'goomba', 111 | frames: scene.anims.generateFrameNames('mario-sprites', { 112 | prefix: 'goomba/walk', 113 | start: 1, 114 | end: 2 115 | }), 116 | frameRate: 5, 117 | repeat: -1, 118 | repeatDelay: 0 119 | }; 120 | scene.anims.create(config); 121 | config = { 122 | key: 'goombaFlat', 123 | frames: [{ 124 | key: 'mario-sprites', 125 | frame: 'goomba/flat' 126 | }] 127 | }; 128 | scene.anims.create(config); 129 | config = { 130 | key: 'turtle', 131 | frames: scene.anims.generateFrameNames('mario-sprites', { 132 | prefix: 'turtle/turtle', 133 | end: 1 134 | }), 135 | frameRate: 5, 136 | repeat: -1, 137 | repeatDelay: 0 138 | }; 139 | 140 | scene.anims.create(config); 141 | config = { 142 | key: 'mario/climb', 143 | frames: scene.anims.generateFrameNames('mario-sprites', { 144 | prefix: 'mario/climb', 145 | end: 1 146 | }), 147 | frameRate: 5, 148 | repeat: -1, 149 | repeatDelay: 0 150 | }; 151 | scene.anims.create(config); 152 | config = { 153 | key: 'mario/climbSuper', 154 | frames: scene.anims.generateFrameNames('mario-sprites', { 155 | prefix: 'mario/climbSuper', 156 | end: 1 157 | }), 158 | frameRate: 5, 159 | repeat: -1, 160 | repeatDelay: 0 161 | }; 162 | 163 | scene.anims.create(config); 164 | 165 | config = { 166 | key: 'flag', 167 | frames: [{ 168 | key: 'mario-sprites', 169 | frame: 'flag' 170 | }], 171 | repeat: -1 172 | }; 173 | scene.anims.create(config); 174 | 175 | config = { 176 | key: 'turtleShell', 177 | frames: [{ 178 | frame: 'turtle/shell', 179 | key: 'mario-sprites' 180 | }] 181 | }; 182 | 183 | scene.anims.create(config); 184 | 185 | config = { 186 | key: 'mushroom', 187 | frames: [{ 188 | frame: 'powerup/super', 189 | key: 'mario-sprites' 190 | }] 191 | 192 | }; 193 | scene.anims.create(config); 194 | 195 | config = { 196 | key: 'coin', 197 | frames: scene.anims.generateFrameNames('mario-sprites', { 198 | prefix: 'coin/spin', 199 | start: 1, 200 | end: 4 201 | }), 202 | frameRate: 30, 203 | repeat: -1, 204 | repeatDelay: 0 205 | }; 206 | scene.anims.create(config); 207 | 208 | config = { 209 | key: '1up', 210 | frames: [{ 211 | frame: 'powerup/1up', 212 | key: 'mario-sprites' 213 | }] 214 | }; 215 | scene.anims.create(config); 216 | 217 | config = { 218 | key: 'flower', 219 | frames: scene.anims.generateFrameNames('mario-sprites', { 220 | prefix: 'powerup/flower', 221 | start: 1, 222 | end: 4 223 | }), 224 | frameRate: 30, 225 | repeat: -1, 226 | repeatDelay: 0 227 | }; 228 | scene.anims.create(config); 229 | 230 | config = { 231 | key: 'star', 232 | frames: scene.anims.generateFrameNames('mario-sprites', { 233 | prefix: 'powerup/star', 234 | start: 1, 235 | end: 4 236 | }), 237 | frameRate: 30, 238 | repeat: -1, 239 | repeatDelay: 0 240 | }; 241 | scene.anims.create(config); 242 | config = { 243 | key: 'dpad', 244 | frames: [{ 245 | frame: 'controller/dpad', 246 | key: 'mario-sprites' 247 | }] 248 | }; 249 | scene.anims.create(config); 250 | config = { 251 | key: 'button', 252 | frames: [{ 253 | frame: 'controller/button', 254 | key: 'mario-sprites' 255 | }] 256 | }; 257 | scene.anims.create(config); 258 | 259 | config = { 260 | key: 'fireFly', 261 | frames: scene.anims.generateFrameNames('mario-sprites', { 262 | prefix: 'fire/fly', 263 | start: 1, 264 | end: 4 265 | }), 266 | frameRate: 10, 267 | repeat: -1, 268 | repeatDelay: 0 269 | }; 270 | scene.anims.create(config); 271 | 272 | config = { 273 | key: 'fireExplode', 274 | frames: scene.anims.generateFrameNames('mario-sprites', { 275 | prefix: 'fire/explode', 276 | start: 1, 277 | end: 3 278 | }), 279 | frameRate: 30, 280 | repeat: 0, 281 | repeatDelay: 0 282 | }; 283 | 284 | scene.anims.create(config); 285 | } 286 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser3 - ES6 - Webpack 7 | 8 | 9 | 10 | 11 | 12 | 26 | 27 | 28 | 29 |
Phaser 3 Generic Platformer example | Show/hide touch controls | Source code on Github (migth be ahead/behind this example) | Animated tiles plugin
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import 'phaser'; 2 | import BootScene from './scenes/BootScene'; 3 | import GameScene from './scenes/GameScene'; 4 | import TitleScene from './scenes/TitleScene'; 5 | 6 | const config = { 7 | // For more settings see 8 | type: Phaser.WEBGL, 9 | pixelArt: true, 10 | roundPixels: true, 11 | parent: 'content', 12 | width: 400, 13 | height: 240, 14 | physics: { 15 | default: 'arcade', 16 | arcade: { 17 | gravity: { 18 | y: 800 19 | }, 20 | debug: false 21 | } 22 | }, 23 | scene: [ 24 | BootScene, 25 | TitleScene, 26 | GameScene 27 | ] 28 | }; 29 | 30 | const game = new Phaser.Game(config); // eslint-disable-line no-unused-vars 31 | -------------------------------------------------------------------------------- /src/scenes/BootScene.js: -------------------------------------------------------------------------------- 1 | import makeAnimations from '../helpers/animations'; 2 | 3 | class BootScene extends Phaser.Scene { 4 | constructor(test) { 5 | super({ 6 | key: 'BootScene' 7 | }); 8 | } 9 | preload() { 10 | const progress = this.add.graphics(); 11 | 12 | // Register a load progress event to show a load bar 13 | this.load.on('progress', (value) => { 14 | progress.clear(); 15 | progress.fillStyle(0xffffff, 1); 16 | progress.fillRect(0, this.sys.game.config.height / 2, this.sys.game.config.width * value, 60); 17 | }); 18 | 19 | // Register a load complete event to launch the title screen when all files are loaded 20 | this.load.on('complete', () => { 21 | // prepare all animations, defined in a separate file 22 | makeAnimations(this); 23 | progress.destroy(); 24 | this.scene.start('TitleScene'); 25 | }); 26 | 27 | this.load.image('background-clouds', 'assets/images/clouds.png'); // 16-bit later 28 | 29 | // Tilemap with a lot of objects and tile-properties tricks 30 | this.load.tilemapTiledJSON('map', 'assets/tilemaps/super-mario.json'); 31 | 32 | // I load the tiles as a spritesheet so I can use it for both sprites and tiles, 33 | // Normally you should load it as an image. 34 | this.load.spritesheet('tiles', 'assets/images/super-mario.png', { 35 | frameWidth: 16, 36 | frameHeight: 16, 37 | spacing: 2 38 | }); 39 | 40 | // Support for switching between 8-bit and 16-bit tiles 41 | this.load.spritesheet('tiles-16bit', 'assets/images/super-mario-16bit.png', { 42 | frameWidth: 16, 43 | frameHeight: 16, 44 | spacing: 2 45 | }); 46 | 47 | // Spritesheets with fixed sizes. Should be replaced with atlas: 48 | this.load.spritesheet('mario', 'assets/images/mario-sprites.png', { 49 | frameWidth: 16, 50 | frameHeight: 32 51 | }); 52 | 53 | // Beginning of an atlas to replace the spritesheets above. Always use spriteatlases. I use TexturePacker to prepare them. 54 | // Check rawAssets folder for the TexturePacker project I use to prepare these files. 55 | this.load.atlas('mario-sprites', 'assets/mario-sprites.png', 'assets/mario-sprites.json'); 56 | 57 | // Music to play. It's not properly edited for an continous loop, but game play experience isn't really the aim of this repository either. 58 | this.load.audio('overworld', [ 59 | 'assets/music/overworld.ogg', 60 | 'assets/music/overworld.mp3' 61 | ]); 62 | 63 | // Sound effects in a audioSprite. 64 | this.load.audioSprite('sfx', 'assets/audio/sfx.json', [ 65 | 'assets/audio/sfx.ogg', 66 | 'assets/audio/sfx.mp3' 67 | ], { 68 | instances: 4 69 | }); 70 | 71 | this.load.bitmapFont('font', 'assets/fonts/font.png', 'assets/fonts/font.fnt'); 72 | 73 | // This json contain recorded gamep 74 | this.load.json('attractMode', 'assets/json/attractMode.json'); 75 | } 76 | } 77 | 78 | export default BootScene; 79 | -------------------------------------------------------------------------------- /src/scenes/GameScene.js: -------------------------------------------------------------------------------- 1 | import Mario from '../sprites/Mario'; 2 | import Goomba from '../sprites/Goomba'; 3 | import Turtle from '../sprites/Turtle'; 4 | import PowerUp from '../sprites/PowerUp'; 5 | import SMBTileSprite from '../sprites/SMBTileSprite'; 6 | import AnimatedTiles from 'phaser-animated-tiles/dist/AnimatedTiles.min.js'; 7 | import Fire from '../sprites/Fire'; 8 | 9 | class GameScene extends Phaser.Scene { 10 | constructor(test) { 11 | super({ 12 | key: 'GameScene' 13 | }); 14 | } 15 | 16 | preload() { 17 | this.load.scenePlugin('animatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles'); 18 | } 19 | 20 | create() { 21 | // This scene is either called to run in attract mode in the background of the title screen 22 | // or for actual gameplay. Attract mode is based on a JSON-recording. 23 | if (this.registry.get('attractMode')) { 24 | this.attractMode = { 25 | recording: this.sys.cache.json.entries.entries.attractMode, 26 | current: 0, 27 | time: 0 28 | }; 29 | } else { 30 | this.attractMode = null; 31 | } 32 | 33 | // Places to warp to (from pipes). These coordinates is used also to define current room (see below) 34 | this.destinations = {}; 35 | 36 | // Array of rooms to keep bounds within to avoid the need of multiple tilemaps per level. 37 | // It might be a singe screen room like when going down a pipe or a sidescrolling level. 38 | // It's defined as objects in Tiled. 39 | this.rooms = []; 40 | 41 | // Running in 8-bit mode (16-bit mode is avaliable for the tiles, but I haven't done any work on sprites etc) 42 | this.eightBit = true; 43 | 44 | // Add and play the music 45 | this.music = this.sound.add('overworld'); 46 | this.music.play({ 47 | loop: true 48 | }); 49 | 50 | // Add the map + bind the tileset 51 | this.map = this.make.tilemap({ 52 | key: 'map' 53 | }); 54 | this.tileset = this.map.addTilesetImage('SuperMarioBros-World1-1', 'tiles'); 55 | 56 | // Dynamic layer because we want breakable and animated tiles 57 | this.groundLayer = this.map.createDynamicLayer('world', this.tileset, 0, 0); 58 | 59 | // We got the map. Tell animated tiles plugin to loop through the tileset properties and get ready. 60 | // We don't need to do anything beyond this point for animated tiles to work. 61 | this.sys.animatedTiles.init(this.map); 62 | 63 | // Probably not the correct way of doing this: 64 | this.physics.world.bounds.width = this.groundLayer.width; 65 | 66 | // Add the background as an tilesprite. 67 | this.add.tileSprite(0, 0, this.groundLayer.width, 500, 'background-clouds'); 68 | 69 | // Set collision by property 70 | this.groundLayer.setCollisionByProperty({ 71 | collide: true 72 | }); 73 | 74 | // This group contains all enemies for collision and calling update-methods 75 | this.enemyGroup = this.add.group(); 76 | 77 | // A group powerUps to update 78 | this.powerUps = this.add.group(); 79 | 80 | // Populate enemyGroup, powerUps, pipes and destinations from object layers 81 | this.parseObjectLayers(); 82 | 83 | // this.keys will contain all we need to control Mario. 84 | // Any key could just replace the default (like this.key.jump) 85 | this.keys = { 86 | jump: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP), 87 | jump2: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.X), 88 | fire: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z), 89 | left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT), 90 | right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT), 91 | down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN) 92 | }; 93 | 94 | // An emitter for bricks when blocks are destroyed. 95 | this.blockEmitter = this.add.particles('mario-sprites'); 96 | 97 | this.blockEmitter.createEmitter({ 98 | frame: { 99 | frames: ['brick'], 100 | cycle: true 101 | }, 102 | gravityY: 1000, 103 | lifespan: 2000, 104 | speed: 400, 105 | angle: { 106 | min: -90 - 25, 107 | max: -45 - 25 108 | }, 109 | frequency: -1 110 | }); 111 | 112 | // Used when hitting a tile from below that should bounce up. 113 | this.bounceTile = new SMBTileSprite({ 114 | scene: this 115 | }); 116 | 117 | this.createHUD(); 118 | 119 | // Prepare the finishLine 120 | let worldEndAt = -1; 121 | for (let x = 0; x < this.groundLayer.width; x++) { 122 | let tile = this.groundLayer.getTileAt(x, 2); 123 | if (tile && tile.properties.worldsEnd) { 124 | worldEndAt = tile.pixelX; 125 | break; 126 | } 127 | } 128 | this.finishLine = { 129 | x: worldEndAt, 130 | flag: this.add.sprite(worldEndAt + 8, 4 * 16), 131 | active: false 132 | }; 133 | this.finishLine.flag.play('flag'); 134 | 135 | // Touch controls is really just a quick hack to try out performance on mobiles, 136 | // It's not itended as a suggestion on how to do it in a real game. 137 | let jumpButton = this.add.sprite(350, 180); 138 | jumpButton.play('button'); 139 | let dpad = this.add.sprite(20, 170); 140 | dpad.play('dpad'); 141 | this.touchControls = { 142 | dpad: dpad, 143 | abutton: jumpButton, 144 | left: false, 145 | right: false, 146 | down: false, 147 | jump: false, 148 | visible: false 149 | }; 150 | jumpButton.setScrollFactor(0, 0); 151 | jumpButton.alpha = 0; 152 | jumpButton.setInteractive(); 153 | jumpButton.on('pointerdown', (pointer) => { 154 | this.touchControls.jump = true; 155 | }); 156 | jumpButton.on('pointerup', (pointer) => { 157 | this.touchControls.jump = false; 158 | }); 159 | dpad.setScrollFactor(0, 0); 160 | dpad.alpha = 0; 161 | dpad.setInteractive(); 162 | dpad.on('pointerdown', (pointer) => { 163 | let x = dpad.x + dpad.width - pointer.x; 164 | let y = dpad.y + dpad.height - pointer.y; 165 | console.log(x, y); 166 | if (y > 0 || Math.abs(x) > -y) { 167 | if (x > 0) { 168 | console.log('going left'); 169 | this.touchControls.left = true; 170 | } else { 171 | console.log('going right'); 172 | this.touchControls.right = true; 173 | } 174 | } else { 175 | this.touchControls.down = true; 176 | } 177 | }); 178 | dpad.on('pointerup', (pointer) => { 179 | this.touchControls.left = false; 180 | this.touchControls.right = false; 181 | this.touchControls.down = false; 182 | }); 183 | window.toggleTouch = this.toggleTouch.bind(this); 184 | 185 | // Mute music while in attract mode 186 | if (this.attractMode) { 187 | this.music.volume = 0; 188 | } 189 | 190 | // If the game ended while physics was disabled 191 | this.physics.world.resume(); 192 | 193 | // CREATE MARIO!!! 194 | this.mario = new Mario({ 195 | scene: this, 196 | key: 'mario', 197 | x: 16 * 6, 198 | y: this.sys.game.config.height - 48 - 48 199 | }); 200 | 201 | // Set bounds for current room 202 | this.mario.setRoomBounds(this.rooms); 203 | 204 | // The camera should follow Mario 205 | this.cameras.main.startFollow(this.mario); 206 | 207 | this.cameras.main.roundPixels = true; 208 | 209 | this.fireballs = this.add.group({ 210 | classType: Fire, 211 | maxSize: 10, 212 | runChildUpdate: false // Due to https://github.com/photonstorm/phaser/issues/3724 213 | }); 214 | } 215 | 216 | update(time, delta) { 217 | if (!this.attractMode) { 218 | this.record(delta); 219 | } 220 | 221 | // this.fireballs.children.forEach((fire)=>{ 222 | // fire.update(time, delta); 223 | // }) 224 | 225 | Array.from(this.fireballs.children.entries).forEach( 226 | (fireball) => { 227 | fireball.update(time, delta); 228 | }); 229 | 230 | /* console.log(time); */ 231 | if (this.attractMode) { 232 | this.attractMode.time += delta; 233 | 234 | // console.log(this.attractMode.current); 235 | // console.log(this.attractMode.current, this.attractMode.recording.length); 236 | 237 | if (this.mario.y > 240 || (this.attractMode.recording.length <= this.attractMode.current + 2) || this.attractMode.current === 14000) { 238 | this.attractMode.current = 0; 239 | this.attractMode.time = 0; 240 | this.mario.x = 16 * 6; // 3500, 241 | this.tick = 0; 242 | this.registry.set('restartScene', true); 243 | 244 | // this.scene.stop(); 245 | // this.scene.switch('GameScene'); 246 | // this.create(); 247 | console.log('RESET'); 248 | 249 | // this.mario.y = this.sys.game.config.height - 48 -48 250 | // return; 251 | } 252 | 253 | if (this.attractMode.time >= this.attractMode.recording[this.attractMode.current + 1].time) { 254 | this.attractMode.current++; 255 | this.mario.x = this.attractMode.recording[this.attractMode.current].x; 256 | this.mario.y = this.attractMode.recording[this.attractMode.current].y; 257 | this.mario.body.setVelocity(this.attractMode.recording[this.attractMode.current].vx, this.attractMode.recording[this.attractMode.current].vy); 258 | } 259 | this.keys = { 260 | jump: { 261 | isDown: this.attractMode.recording[this.attractMode.current].keys.jump 262 | }, 263 | jump2: { 264 | isDown: false 265 | }, 266 | left: { 267 | isDown: this.attractMode.recording[this.attractMode.current].keys.left 268 | }, 269 | right: { 270 | isDown: this.attractMode.recording[this.attractMode.current].keys.right 271 | }, 272 | down: { 273 | isDown: this.attractMode.recording[this.attractMode.current].keys.down 274 | }, 275 | fire: { 276 | isDown: this.attractMode.recording[this.attractMode.current].keys.fire 277 | } 278 | }; 279 | } 280 | 281 | if (this.physics.world.isPaused) { 282 | return; 283 | } 284 | 285 | if (this.mario.x > this.finishLine.x && this.finishLine.active) { 286 | this.removeFlag(); 287 | this.physics.world.pause(); 288 | return; 289 | } 290 | 291 | this.levelTimer.time -= delta * 2; 292 | if (this.levelTimer.time - this.levelTimer.displayedTime * 1000 < 1000) { 293 | this.levelTimer.displayedTime = Math.round(this.levelTimer.time / 1000); 294 | this.levelTimer.textObject.setText(('' + this.levelTimer.displayedTime).padStart(3, '0')); 295 | if (this.levelTimer.displayedTime < 50 && !this.levelTimer.hurry) { 296 | this.levelTimer.hurry = true; 297 | this.music.pause(); 298 | let sound = this.sound.addAudioSprite('sfx'); 299 | sound.on('ended', (sound) => { 300 | this.music.seek = 0; 301 | this.music.rate = 1.5; 302 | this.music.resume(); 303 | sound.destroy(); 304 | }); 305 | sound.play('smb_warning'); 306 | } 307 | if (this.levelTimer.displayedTime < 1) { 308 | this.mario.die(); 309 | this.levelTimer.hurry = false; 310 | this.music.rate = 1; 311 | this.levelTimer.time = 150 * 1000; 312 | this.levelTimer.displayedTime = 255; 313 | } 314 | } 315 | 316 | // Run the update method of Mario 317 | this.mario.update(this.keys, time, delta); 318 | 319 | // Run the update method of all enemies 320 | this.enemyGroup.children.entries.forEach( 321 | (sprite) => { 322 | sprite.update(time, delta); 323 | } 324 | ); 325 | 326 | // Run the update method of non-enemy sprites 327 | this.powerUps.children.entries.forEach( 328 | (sprite) => { 329 | sprite.update(time, delta); 330 | } 331 | ); 332 | } 333 | 334 | tileCollision(sprite, tile) { 335 | if (sprite.type === 'turtle') { 336 | if (tile.y > Math.round(sprite.y / 16)) { 337 | // Turtles ignore the ground 338 | return; 339 | } 340 | } else if (sprite.type === 'mario') { 341 | // Mario is bending on a pipe that leads somewhere: 342 | if (sprite.bending && tile.properties.pipe && tile.properties.dest) { 343 | sprite.enterPipe(tile.properties.dest, tile.rotation); 344 | } 345 | } 346 | 347 | // If it's Mario and the body isn't blocked up it can't hit question marks or break bricks 348 | // Otherwise Mario will break bricks he touch from the side while moving up. 349 | if (sprite.type === 'mario' && !sprite.body.blocked.up) { 350 | return; 351 | } 352 | 353 | // If the tile has a callback, lets fire it 354 | if (tile.properties.callback) { 355 | switch (tile.properties.callback) { 356 | case 'questionMark': 357 | // Shift to a metallic block 358 | tile.index = 44; 359 | 360 | // Bounce it a bit 361 | sprite.scene.bounceTile.restart(tile); 362 | 363 | // The questionmark is no more 364 | tile.properties.callback = null; 365 | 366 | // Invincible blocks are only collidable from above, but everywhere once revealed 367 | tile.setCollision(true); 368 | 369 | // Check powerUp for what to do, make a coin if not defined 370 | let powerUp = tile.powerUp ? tile.powerUp : 'coin'; 371 | 372 | // Make powerUp (including a coin) 373 | (() => new PowerUp({ 374 | scene: sprite.scene, 375 | key: 'sprites16', 376 | x: tile.x * 16 + 8, 377 | y: tile.y * 16 - 8, 378 | type: powerUp 379 | }))(); 380 | 381 | break; 382 | case 'breakable': 383 | if (sprite.type === 'mario' && sprite.animSuffix === '') { 384 | // Can't break it anyway. Bounce it a bit. 385 | sprite.scene.bounceTile.restart(tile); 386 | sprite.scene.sound.playAudioSprite('sfx', 'smb_bump'); 387 | } else { 388 | // get points 389 | sprite.scene.updateScore(50); 390 | sprite.scene.map.removeTileAt(tile.x, tile.y, true, true, this.groundLayer); 391 | sprite.scene.sound.playAudioSprite('sfx', 'smb_breakblock'); 392 | sprite.scene.blockEmitter.emitParticle(6, tile.x * 16, tile.y * 16); 393 | } 394 | break; 395 | case 'toggle16bit': 396 | sprite.scene.eightBit = !sprite.scene.eightBit; 397 | if (sprite.scene.eightBit) { 398 | sprite.scene.tileset.setImage(sprite.scene.sys.textures.get('tiles')); 399 | } else { 400 | sprite.scene.tileset.setImage(sprite.scene.sys.textures.get('tiles-16bit')); 401 | } 402 | break; 403 | default: 404 | sprite.scene.sound.playAudioSprite('sfx', 'smb_bump'); 405 | break; 406 | } 407 | } else { 408 | sprite.scene.sound.playAudioSprite('sfx', 'smb_bump'); 409 | } 410 | } 411 | 412 | /* * To be removed, supported natively now: 413 | * setCollisionByProperty(map) { 414 | Object.keys(map.tilesets[0].tileProperties).forEach( 415 | (id) => { 416 | 417 | if (map.tilesets[0].tileProperties[id].collide) { 418 | map.setCollision(parseInt(id) + 1); 419 | } 420 | } 421 | ) 422 | } */ 423 | 424 | updateScore(score) { 425 | this.score.pts += score; 426 | this.score.textObject.setText(('' + this.score.pts).padStart(6, '0')); 427 | } 428 | 429 | removeFlag(step = 0) { 430 | switch (step) { 431 | case 0: 432 | this.music.pause(); 433 | this.sound.playAudioSprite('sfx', 'smb_flagpole'); 434 | this.mario.play('mario/climb' + this.mario.animSuffix); 435 | this.mario.x = this.finishLine.x - 1; 436 | this.tweens.add({ 437 | targets: this.finishLine.flag, 438 | y: 240 - 6 * 8, 439 | duration: 1500, 440 | onComplete: () => this.removeFlag(1) 441 | }); 442 | this.tweens.add({ 443 | targets: this.mario, 444 | y: 240 - 3 * 16, 445 | duration: 1000, 446 | onComplete: () => { 447 | this.mario.flipX = true; 448 | this.mario.x += 11; 449 | } 450 | }); 451 | break; 452 | case 1: 453 | let sound = this.sound.addAudioSprite('sfx'); 454 | sound.on('ended', (sound) => { 455 | /* this.mario.x = 48; 456 | this.mario.y = -32; 457 | this.mario.body.setVelocity(0); 458 | this.mario.alpha = 1; 459 | this.music.rate = 1; 460 | this.music.seek = 0; 461 | this.music.resume(); 462 | this.levelTimer.hurry = false; 463 | this.levelTimer.time = 150 * 1000; 464 | this.levelTimer.displayedTime = 255; 465 | this.physics.world.resume(); */ 466 | sound.destroy(); 467 | this.scene.start('TitleScene'); 468 | }); 469 | sound.play('smb_stage_clear'); 470 | 471 | this.mario.play('run' + this.mario.animSuffix); 472 | 473 | this.mario.flipX = false; 474 | this.tweens.add({ 475 | targets: this.mario, 476 | x: this.finishLine.x + 6 * 16, 477 | duration: 1000, 478 | onComplete: () => this.removeFlag(2) 479 | }); 480 | break; 481 | case 2: 482 | this.tweens.add({ 483 | targets: this.mario, 484 | alpha: 0, 485 | duration: 500 486 | }); 487 | break; 488 | } 489 | } 490 | 491 | toggleTouch() { 492 | this.touchControls.visible = !this.touchControls.visible; 493 | if (this.touchControls.visible) { 494 | this.touchControls.dpad.alpha = 0; 495 | this.touchControls.abutton.alpha = 0; 496 | } else { 497 | this.touchControls.dpad.alpha = 0.5; 498 | this.touchControls.abutton.alpha = 0.5; 499 | } 500 | } 501 | 502 | record(delta) { 503 | let update = false; 504 | let keys = { 505 | jump: this.keys.jump.isDown || this.keys.jump2.isDown, 506 | left: this.keys.left.isDown, 507 | right: this.keys.right.isDown, 508 | down: this.keys.down.isDown, 509 | fire: this.keys.fire.isDown 510 | }; 511 | if (typeof (recording) === 'undefined') { 512 | console.log('DEFINE'); 513 | window.recording = []; 514 | window.time = 0; 515 | this.recordedKeys = {}; 516 | update = true; 517 | } else { 518 | update = (time - recording[recording.length - 1].time) > 200; // update at least 5 times per second 519 | } 520 | time += delta; 521 | if (!update) { 522 | // update if keys changed 523 | ['jump', 'left', 'right', 'down', 'fire'].forEach((dir) => { 524 | if (keys[dir] !== this.recordedKeys[dir]) { 525 | update = true; 526 | } 527 | }); 528 | } 529 | if (update) { 530 | recording.push({ 531 | time, 532 | keys, 533 | x: this.mario.x, 534 | y: this.mario.y, 535 | vx: this.mario.body.velocity.x, 536 | vy: this.mario.body.velocity.y 537 | }); 538 | } 539 | this.recordedKeys = keys; 540 | } 541 | 542 | parseObjectLayers() { 543 | // The map has one object layer with enemies as stamped tiles, 544 | // each tile has properties containing info on what enemy it represents. 545 | this.map.getObjectLayer('enemies').objects.forEach( 546 | (enemy) => { 547 | let enemyObject; 548 | switch (this.tileset.tileProperties[enemy.gid - 1].name) { 549 | case 'goomba': 550 | enemyObject = new Goomba({ 551 | scene: this, 552 | key: 'sprites16', 553 | x: enemy.x, 554 | y: enemy.y 555 | }); 556 | break; 557 | case 'turtle': 558 | enemyObject = new Turtle({ 559 | scene: this, 560 | key: 'mario-sprites', 561 | x: enemy.x, 562 | y: enemy.y 563 | }); 564 | break; 565 | default: 566 | console.error('Unknown:', this.tileset.tileProperties[enemy.gid - 1]); // eslint-disable-line no-console 567 | break; 568 | } 569 | this.enemyGroup.add(enemyObject); 570 | } 571 | ); 572 | 573 | // The map has an object layer with 'modifiers' that do 'stuff', see below 574 | this.map.getObjectLayer('modifiers').objects.forEach((modifier) => { 575 | let tile, properties, type; 576 | 577 | // Get property stuff from the tile if present or just from the object layer directly 578 | if (typeof modifier.gid !== 'undefined') { 579 | properties = this.tileset.tileProperties[modifier.gid - 1]; 580 | type = properties.type; 581 | if (properties.hasOwnProperty('powerUp')) { 582 | type = 'powerUp'; 583 | } 584 | } else { 585 | type = modifier.properties.type; 586 | } 587 | 588 | switch (type) { 589 | case 'powerUp': 590 | // Modifies a questionmark below the modifier to contain something else than the default (coin) 591 | tile = this.groundLayer.getTileAt(modifier.x / 16, modifier.y / 16 - 1); 592 | tile.powerUp = properties.powerUp; 593 | tile.properties.callback = 'questionMark'; 594 | if (!tile.collides) { 595 | // Hidden block without a question mark 596 | tile.setCollision(false, false, false, true); 597 | } 598 | break; 599 | case 'pipe': 600 | // Adds info on where to go from a pipe under the modifier 601 | tile = this.groundLayer.getTileAt(modifier.x / 16, modifier.y / 16); 602 | tile.properties.dest = parseInt(modifier.properties.goto); 603 | break; 604 | case 'dest': 605 | // Adds a destination so that a pipe can find it 606 | this.destinations[modifier.properties.id] = { 607 | x: modifier.x + modifier.width / 2, 608 | top: (modifier.y < 16) 609 | }; 610 | break; 611 | case 'room': 612 | // Adds a 'room' that is just info on bounds so that we can add sections below pipes 613 | // in an level just using one tilemap. 614 | this.rooms.push({ 615 | x: modifier.x, 616 | width: modifier.width, 617 | sky: modifier.properties.sky 618 | }); 619 | break; 620 | } 621 | }); 622 | } 623 | 624 | createHUD() { 625 | const hud = this.add.bitmapText(5 * 8, 8, 'font', 'MARIO TIME', 8); 626 | hud.setScrollFactor(0, 0); 627 | this.levelTimer = { 628 | textObject: this.add.bitmapText(36 * 8, 16, 'font', '255', 8), 629 | time: 150 * 1000, 630 | displayedTime: 255, 631 | hurry: false 632 | }; 633 | this.levelTimer.textObject.setScrollFactor(0, 0); 634 | this.score = { 635 | pts: 0, 636 | textObject: this.add.bitmapText(5 * 8, 16, 'font', '000000', 8) 637 | }; 638 | this.score.textObject.setScrollFactor(0, 0); 639 | 640 | if (this.attractMode) { 641 | hud.alpha = 0; 642 | this.levelTimer.textObject.alpha = 0; 643 | this.score.textObject.alpha = 0; 644 | } 645 | } 646 | 647 | cleanUp() { 648 | // Never called since 3.10 update (I called it from create before). If Everything is fine, I'll remove this method. 649 | // Scenes isn't properly destroyed yet. 650 | let ignore = ['sys', 'anims', 'cache', 'registry', 'sound', 'textures', 'events', 'cameras', 'make', 'add', 'scene', 'children', 'cameras3d', 'time', 'data', 'input', 'load', 'tweens', 'lights', 'physics']; 651 | let whatThisHad = ['sys', 'anims', 'cache', 'registry', 'sound', 'textures', 'events', 'cameras', 'make', 'add', 'scene', 'children', 'cameras3d', 'time', 'data', 'input', 'load', 'tweens', 'lights', 'physics', 'attractMode', 'destinations', 'rooms', 'eightBit', 'music', 'map', 'tileset', 'groundLayer', 'mario', 'enemyGroup', 'powerUps', 'keys', 'blockEmitter', 'bounceTile', 'levelTimer', 'score', 'finishLine', 'touchControls']; 652 | whatThisHad.forEach(key => { 653 | if (ignore.indexOf(key) === -1 && this[key]) { 654 | switch (key) { 655 | case 'enemyGroup': 656 | case 'music': 657 | case 'map': 658 | this[key].destroy(); 659 | break; 660 | } 661 | this[key] = null; 662 | } 663 | }); 664 | } 665 | } 666 | 667 | export default GameScene; 668 | -------------------------------------------------------------------------------- /src/scenes/TitleScene.js: -------------------------------------------------------------------------------- 1 | class TitleScene extends Phaser.Scene { 2 | constructor(test) { 3 | super({ 4 | key: 'TitleScene' 5 | }); 6 | } 7 | preload() { 8 | this.load.atlas('mario-sprites', 'assets/mario-sprites.png', 'assets/mario-sprites.json'); 9 | } 10 | create() { 11 | let config = { 12 | key: 'title', 13 | frames: [{ 14 | frame: 'title', 15 | key: 'mario-sprites' 16 | }] 17 | }; 18 | this.anims.create(config); 19 | 20 | this.title = this.add.sprite(this.sys.game.config.width / 2, 16 * 5); 21 | this.title.play('title'); 22 | this.attractMode = this.scene.launch('GameScene'); 23 | console.log(this.attractMode.stop); 24 | 25 | this.scene.bringToTop(); 26 | 27 | this.registry.set('restartScene', false); 28 | this.registry.set('attractMode', true); 29 | 30 | let sh = window.screen.availHeight; 31 | let sw = window.screen.availWidth; 32 | 33 | // let ch = 0; 34 | // let cw = 0; 35 | let multiplier = 1; 36 | if (sh / sw > 0.6) { 37 | // Portrait, fit width 38 | multiplier = sw / 400; 39 | } else { 40 | multiplier = sh / 240; 41 | } 42 | multiplier = Math.floor(multiplier); 43 | let el = document.getElementsByTagName('canvas')[0]; 44 | el.style.width = 400 * multiplier + 'px'; 45 | el.style.height = 240 * multiplier + 'px'; 46 | 47 | this.pressX = this.add.bitmapText(16 * 8 + 4, 8 * 16, 'font', 'PRESS X TO START', 8); 48 | this.blink = 1000; 49 | 50 | this.startKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.X); 51 | 52 | this.input.on('pointerdown', () => { 53 | this.startGame(); 54 | }); 55 | } 56 | 57 | update(time, delta) { 58 | if (this.registry.get('restartScene')) { 59 | this.restartScene(); 60 | } 61 | this.blink -= delta; 62 | if (this.blink < 0) { 63 | this.pressX.alpha = this.pressX.alpha === 1 ? 0 : 1; 64 | this.blink = 500; 65 | } 66 | 67 | if (!this.registry.get('attractMode')) {} 68 | if (this.startKey.isDown) { 69 | this.startGame(); 70 | } 71 | } 72 | 73 | startGame() { 74 | this.scene.stop('GameScene'); 75 | this.registry.set('attractMode', false); 76 | this.scene.start('GameScene'); 77 | } 78 | 79 | restartScene() { 80 | // this.attractMode.stop(); 81 | this.scene.stop('GameScene'); 82 | this.scene.launch('GameScene'); 83 | this.scene.bringToTop(); 84 | 85 | this.registry.set('restartScene', false); 86 | } 87 | } 88 | 89 | export default TitleScene; 90 | -------------------------------------------------------------------------------- /src/sprites/Enemy.js: -------------------------------------------------------------------------------- 1 | /* 2 | Generic enemy class that extends Phaser sprites. 3 | Classes for enemy types extend this class. 4 | */ 5 | 6 | export default class Enemy extends Phaser.GameObjects.Sprite { 7 | constructor(config) { 8 | super(config.scene, config.x, config.y - 16, config.key); 9 | config.scene.physics.world.enable(this); 10 | config.scene.add.existing(this); 11 | this.alive = true; 12 | 13 | // start still and wait until needed 14 | this.body.setVelocity(0, 0).setBounce(0, 0).setCollideWorldBounds(false); 15 | this.body.allowGravity = false; 16 | this.beenSeen = false; 17 | 18 | // know about Mario 19 | this.mario = this.scene.mario; 20 | 21 | // Base horizontal velocity / direction. 22 | this.direction = -50; 23 | 24 | // Standard sprite is 16x16 pixels with a smaller body 25 | this.body.setSize(12, 12); 26 | this.body.offset.set(10, 12); 27 | } 28 | 29 | activated() { 30 | // Method to check if an enemy is activated, the enemy will stay put 31 | // until activated so that starting positions is correct 32 | if (!this.alive) { 33 | if (this.y > 240) { 34 | this.kill(); 35 | } 36 | return false; 37 | } 38 | if (!this.beenSeen) { 39 | // check if it's being seen now and if so, activate it 40 | if (this.x < this.scene.cameras.main.scrollX + this.scene.sys.game.canvas.width + 32) { 41 | this.beenSeen = true; 42 | this.body.velocity.x = this.direction; 43 | this.body.allowGravity = true; 44 | return true; 45 | } 46 | return false; 47 | } 48 | return true; 49 | } 50 | 51 | verticalHit(enemy, mario) { 52 | // quick check if a collision between the enemy and Mario is from above. 53 | if (!mario.alive) { 54 | return false; 55 | } 56 | return mario.body.velocity.y >= 0 && (mario.body.y + mario.body.height) - enemy.body.y < 10; 57 | } 58 | 59 | hurtMario(enemy, mario) { 60 | // send the enemy to mario hurt method (if mario got a star this will not end well for the enemy) 61 | this.scene.mario.hurtBy(enemy); 62 | } 63 | 64 | starKilled() { 65 | // Killed by a star or hit from below with a block, later on also fire 66 | if (!this.alive) { 67 | return; 68 | } 69 | this.body.velocity.x = 0; 70 | this.body.velocity.y = -200; 71 | this.alive = false; 72 | this.flipY = true; 73 | this.scene.sound.playAudioSprite('sfx', 'smb_stomp'); 74 | this.scene.updateScore(100); 75 | } 76 | 77 | kill() { 78 | // Forget about this enemy 79 | this.scene.enemyGroup.remove(this); 80 | this.destroy(); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/sprites/Fire.js: -------------------------------------------------------------------------------- 1 | export default class Fire extends Phaser.GameObjects.Sprite { 2 | constructor(scene) { 3 | super(scene); 4 | console.log(scene); 5 | // super(config.scene, config.x, config.y, config.key); 6 | this.hej = '!!!'; 7 | 8 | /* switch(config.type) { 9 | case "shot": 10 | case "obstacle": 11 | 12 | } */ 13 | this.scene.physics.world.enable(this); 14 | 15 | this.body.setSize(8, 8); 16 | this.body.offset.set(12, 12); 17 | // break; 18 | 19 | this.on('animationcomplete', () => { 20 | if (this.anims.currentAnim.key === 'fireExplode') { 21 | this.setActive(false); 22 | this.setVisible(false); 23 | } 24 | }, this); 25 | } 26 | 27 | fire(x, y, left) { 28 | this.setActive(true); 29 | this.setVisible(true); 30 | // this.scene.add.existing(this); 31 | this.body.allowGravity = true; 32 | 33 | this.setPosition(x, y); 34 | this.body.velocity.x = 400 * (left ? -1 : 1); 35 | this.play('fireFly'); 36 | this.scene.sound.playAudioSprite('sfx', 'smb_fireball'); 37 | 38 | console.log(this.scene.physics.world.collide); 39 | } 40 | 41 | update(time, delta) { 42 | if (!this.active) { 43 | return; 44 | } 45 | this.scene.physics.world.collide(this, this.scene.groundLayer, () => this.collided()); 46 | this.scene.physics.world.overlap(this, this.scene.enemyGroup, (me, enemy) => { 47 | me.explode(); 48 | enemy.starKilled(); 49 | }); 50 | 51 | // console.log(this.scene.physics.world.collide); 52 | } 53 | 54 | collided() { 55 | console.log('COLLIDED'); 56 | if (this.body.velocity.y === 0) { 57 | this.body.velocity.y = -150; 58 | } 59 | if (this.body.velocity.x === 0) { 60 | this.scene.sound.playAudioSprite('sfx', 'smb_bump'); 61 | 62 | this.explode(); 63 | } 64 | } 65 | 66 | explode() { 67 | this.body.allowGravity = false; 68 | this.body.velocity.y = 0; 69 | this.play('fireExplode'); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/sprites/Goomba.js: -------------------------------------------------------------------------------- 1 | import Enemy from './Enemy'; 2 | 3 | export default class Goomba extends Enemy { 4 | constructor(config) { 5 | super(config); 6 | this.body.setVelocity(0, 0).setBounce(0, 0).setCollideWorldBounds(false); 7 | this.anims.play('goomba'); 8 | this.killAt = 0; 9 | } 10 | 11 | update(time, delta) { 12 | // If it's not activated, then just skip the update method (see Enemy.js) 13 | if (!this.activated()) { 14 | return; 15 | } 16 | this.scene.physics.world.collide(this, this.scene.groundLayer); 17 | if (this.killAt !== 0) { 18 | // The killtimer is set, keep the flat Goomba then kill it for good. 19 | this.body.setVelocityX(0); 20 | this.killAt -= delta; 21 | if (this.killAt < 0) { 22 | this.kill(); 23 | } 24 | return; 25 | } 26 | 27 | // Collide with Mario! 28 | this.scene.physics.world.overlap(this, this.scene.mario, this.marioHit); 29 | 30 | // The Goomba stopped, better try to walk in the other direction. 31 | if (this.body.velocity.x === 0) { 32 | this.direction = -this.direction; 33 | this.body.velocity.x = this.direction; 34 | } 35 | } 36 | 37 | marioHit(enemy, mario) { 38 | if (enemy.verticalHit(enemy, mario)) { 39 | // Mario jumps on the enemy 40 | mario.enemyBounce(enemy); 41 | enemy.scene.sound.playAudioSprite('sfx', 'smb_stomp'); 42 | enemy.getFlat(enemy, mario); 43 | // get points 44 | enemy.scene.updateScore(100); 45 | } else { 46 | // Mario collides with the enemy 47 | enemy.hurtMario(enemy, mario); 48 | } 49 | } 50 | 51 | getFlat(enemy, mario) { 52 | enemy.play('goombaFlat'); 53 | enemy.body.setVelocityX(0); 54 | enemy.body.acceleration.x = 0; 55 | // Keep goomba flat for 500ms, then remove it. 56 | enemy.killAt = 500; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/sprites/Mario.js: -------------------------------------------------------------------------------- 1 | export default class Mario extends Phaser.GameObjects.Sprite { 2 | constructor(config) { 3 | super(config.scene, config.x, config.y, config.key); 4 | config.scene.physics.world.enable(this); 5 | config.scene.add.existing(this); 6 | this.acceleration = 600; 7 | this.body.maxVelocity.x = 200; 8 | this.body.maxVelocity.y = 500; 9 | this.animSuffix = ''; 10 | this.small(); 11 | 12 | // this.animSuffix = 'Super'; 13 | // this.large(); 14 | 15 | this.bending = false; 16 | this.wasHurt = -1; 17 | this.flashToggle = false; 18 | this.star = { 19 | active: false, 20 | timer: -1, 21 | step: 0 22 | }; 23 | this.enteringPipe = false; 24 | this.anims.play('stand'); 25 | this.alive = true; 26 | this.type = 'mario'; 27 | this.jumpTimer = 0; 28 | this.jumping = false; 29 | this.fireCoolDown = 0; 30 | 31 | this.on('animationcomplete', () => { 32 | if (this.anims.currentAnim.key === 'grow' || this.anims.currentAnim.key === 'shrink') { 33 | this.scene.physics.world.resume(); 34 | } 35 | }, this); 36 | } 37 | 38 | update(keys, time, delta) { 39 | if (this.y > 2040) { 40 | // Really superdead, has been falling for a while. 41 | this.scene.scene.start('TitleScene'); 42 | 43 | // If Mario falls down a cliff or died, just let him drop from the sky and prentend like nothing happened 44 | // this.y = -32; 45 | // if(this.x<16){ 46 | // this.x = 16; 47 | // } 48 | // this.alive = true; 49 | // this.scene.music.seek = 0; 50 | // this.scene.music.play(); 51 | } else if (this.y > 240 && this.alive) { 52 | this.die(); 53 | } 54 | 55 | // Don't do updates while entering the pipe or being dead 56 | if (this.enteringPipe || !this.alive) { 57 | return; 58 | } 59 | 60 | this.fireCoolDown -= delta; 61 | 62 | // Just run callbacks when hitting something from below or trying to enter it 63 | if (this.body.velocity.y < 0 || this.bending) { 64 | this.scene.physics.world.collide(this, this.scene.groundLayer, this.scene.tileCollision); 65 | } else { 66 | this.scene.physics.world.collide(this, this.scene.groundLayer); 67 | } 68 | 69 | if (this.wasHurt > 0) { 70 | this.wasHurt -= delta; 71 | this.flashToggle = !this.flashToggle; 72 | this.alpha = this.flashToggle ? 0.2 : 1; 73 | if (this.wasHurt <= 0) { 74 | this.alpha = 1; 75 | } 76 | } 77 | 78 | if (this.star.active) { 79 | if (this.star.timer < 0) { 80 | this.star.active = false; 81 | this.tint = 0xFFFFFF; 82 | } else { 83 | this.star.timer -= delta; 84 | this.star.step = (this.star.step === 5) ? 0 : this.star.step + 1; 85 | this.tint = [0xFFFFFF, 0xFF0000, 0xFFFFFF, 0x00FF00, 0xFFFFFF, 0x0000FF][this.star.step]; 86 | } 87 | } 88 | 89 | let input = { 90 | left: keys.left.isDown || this.scene.touchControls.left, 91 | right: keys.right.isDown || this.scene.touchControls.right, 92 | down: keys.down.isDown || this.scene.touchControls.down, 93 | jump: keys.jump.isDown || keys.jump2.isDown || this.scene.touchControls.jump, 94 | fire: keys.fire.isDown 95 | }; 96 | 97 | if (input.fire && this.animSuffix === 'Fire' && this.fireCoolDown < 0) { 98 | let fireball = this.scene.fireballs.get(this); 99 | if (fireball) { 100 | fireball.fire(this.x, this.y, this.flipX); 101 | this.fireCoolDown = 300; 102 | } 103 | } 104 | 105 | // this.angle++ 106 | // console.log(this.body.velocity.y); 107 | if (this.body.velocity.y > 0) { 108 | this.hasFalled = true; 109 | } 110 | 111 | this.bending = false; 112 | 113 | this.jumpTimer -= delta; 114 | 115 | if (input.left) { 116 | if (this.body.velocity.y === 0) { 117 | this.run(-this.acceleration); 118 | } else { 119 | this.run(-this.acceleration / 3); 120 | } 121 | this.flipX = true; 122 | } else if (input.right) { 123 | if (this.body.velocity.y === 0) { 124 | this.run(this.acceleration); 125 | } else { 126 | this.run(this.acceleration / 3); 127 | } 128 | this.flipX = false; 129 | } else if (this.body.blocked.down) { 130 | if (Math.abs(this.body.velocity.x) < 10) { 131 | this.body.setVelocityX(0); 132 | this.run(0); 133 | } else { 134 | this.run(((this.body.velocity.x > 0) ? -1 : 1) * this.acceleration / 2); 135 | } 136 | } else if (!this.body.blocked.down) { 137 | this.run(0); 138 | } 139 | 140 | if (input.jump && (!this.jumping || this.jumpTimer > 0)) { 141 | this.jump(); 142 | } else if (!input.jump) { 143 | this.jumpTimer = -1; // Don't resume jump if button is released, prevents mini double-jumps 144 | if (this.body.blocked.down) { 145 | this.jumping = false; 146 | } 147 | } 148 | 149 | let anim = null; 150 | if (this.body.velocity.y !== 0) { 151 | anim = 'jump'; 152 | } else if (this.body.velocity.x !== 0) { 153 | anim = 'run'; 154 | if ((input.left || input.right) && ((this.body.velocity.x > 0 && this.body.acceleration.x < 0) || (this.body.velocity.x < 0 && this.body.acceleration.x > 0))) { 155 | anim = 'turn'; 156 | } else if (this.animSuffix !== '' && input.down && !(input.right || input.left)) { 157 | anim = 'bend'; 158 | } 159 | } else { 160 | anim = 'stand'; 161 | if (this.animSuffix !== '' && input.down && !(input.right || input.left)) { 162 | anim = 'bend'; 163 | } 164 | } 165 | 166 | anim += this.animSuffix; 167 | if (this.anims.currentAnim.key !== anim && !this.scene.physics.world.isPaused) { 168 | this.anims.play(anim); 169 | } 170 | 171 | if (input.down && this.body.velocity.x < 100) { 172 | this.bending = true; 173 | } 174 | 175 | this.physicsCheck = true; 176 | } 177 | 178 | run(vel) { 179 | this.body.setAccelerationX(vel); 180 | } 181 | 182 | jump() { 183 | if (!this.body.blocked.down && !this.jumping) { 184 | return; 185 | } 186 | 187 | if (!this.jumping) { 188 | if (this.animSuffix === '') { 189 | this.scene.sound.playAudioSprite('sfx', 'smb_jump-small'); 190 | } else { 191 | this.scene.sound.playAudioSprite('sfx', 'smb_jump-super'); 192 | } 193 | } 194 | if (this.body.velocity.y < 0 || this.body.blocked.down) { 195 | this.body.setVelocityY(-200); 196 | } 197 | if (!this.jumping) { 198 | this.jumpTimer = 300; 199 | } 200 | this.jumping = true; 201 | } 202 | 203 | enemyBounce(enemy) { 204 | // Force Mario y-position up a bit (on top of the enemy) to avoid getting killed 205 | // by neigbouring enemy before being able to bounce 206 | this.body.y = enemy.body.y - this.body.height; 207 | // TODO: if jump-key is down, add a boost value to jump-velocity to use and init jump for controls to handle. 208 | this.body.setVelocityY(-150); 209 | } 210 | 211 | hurtBy(enemy) { 212 | if (!this.alive) { 213 | return; 214 | } 215 | if (this.star.active) { 216 | enemy.starKilled(enemy, this); 217 | } else if (this.wasHurt < 1) { 218 | if (this.animSuffix !== '') { 219 | this.resize(false); 220 | this.scene.sound.playAudioSprite('sfx', 'smb_pipe'); 221 | 222 | this.wasHurt = 2000; 223 | } else { 224 | this.die(); 225 | } 226 | } 227 | } 228 | 229 | resize(large) { 230 | this.scene.physics.world.pause(); 231 | if (large) { 232 | this.large(); 233 | this.animSuffix = 'Super'; 234 | this.play('grow'); 235 | } else { 236 | this.small(); 237 | this.animSuffix = ''; 238 | this.play('shrink'); 239 | } 240 | } 241 | 242 | small() { 243 | this.body.setSize(10, 10); 244 | this.body.offset.set(3, 14); 245 | } 246 | 247 | large() { 248 | this.body.setSize(10, 22); 249 | this.body.offset.set(3, 10); 250 | } 251 | 252 | die() { 253 | this.scene.music.pause(); 254 | this.play('death'); 255 | this.scene.sound.playAudioSprite('sfx', 'smb_mariodie'); 256 | this.body.setAcceleration(0); 257 | this.body.setVelocity(0, -300); 258 | this.alive = false; 259 | } 260 | 261 | enterPipe(id, dir, init = true) { 262 | if (init) { 263 | if (this.animSuffix === '') { 264 | this.play('stand'); 265 | } else { 266 | this.play('bend' + this.animSuffix); 267 | } 268 | this.scene.sound.playAudioSprite('sfx', 'smb_pipe'); 269 | 270 | this.enteringPipe = true; 271 | this.body.setVelocity(0); 272 | this.body.setAcceleration(0); 273 | this.setDepth(-100); 274 | this.scene.tweens.add({ 275 | targets: this, 276 | y: this.y + 40, 277 | duration: 800, 278 | onComplete: function () { 279 | console.log(this.targets, id, dir); 280 | console.log(id); 281 | console.log(dir); 282 | this.targets[0].enterPipe(id, dir, false); 283 | } 284 | }); 285 | } else { 286 | this.setDepth(1); 287 | this.enteringPipe = false; 288 | this.x = this.scene.destinations[id].x; 289 | this.y = this.scene.destinations[id].top ? -100 : 100; 290 | this.setRoomBounds(this.scene.rooms); 291 | } 292 | } 293 | 294 | setRoomBounds(rooms) { 295 | rooms.forEach( 296 | (room) => { 297 | if (this.x >= room.x && this.x <= (room.x + room.width)) { 298 | let cam = this.scene.cameras.main; 299 | let layer = this.scene.groundLayer; 300 | cam.setBounds(room.x, 0, room.width * layer.scaleX, layer.height * layer.scaleY); 301 | this.scene.finishLine.active = (room.x === 0); 302 | this.scene.cameras.main.setBackgroundColor(room.sky); 303 | } 304 | } 305 | ); 306 | } 307 | } 308 | -------------------------------------------------------------------------------- /src/sprites/PowerUp.js: -------------------------------------------------------------------------------- 1 | export default class PowerUp extends Phaser.GameObjects.Sprite { 2 | constructor(config) { 3 | super(config.scene, config.x, config.y, config.key); 4 | config.scene.physics.world.enable(this); 5 | config.scene.add.existing(this); 6 | this.type = config.type; 7 | this.direction = 70; 8 | if (this.scene.mario.x > config.x + 8) { 9 | // Mario on the right -> powerup bounces left 10 | this.direction = -this.direction; 11 | } 12 | this.body.velocity.x = this.direction; 13 | 14 | // Standard sprite is 16x16 pixels with a smaller body 15 | this.body.setSize(12, 12); 16 | // this.body.offset.set(2, 4); 17 | 18 | if (this.type === 'mushroom' && this.scene.mario.animSuffix !== '') { 19 | this.type = 'flower'; 20 | } 21 | 22 | if (this.type === 'mushroom' || this.type === '1up') { 23 | this.body.velocity.y = -150; 24 | } else if (this.type === 'flower') { 25 | this.setDepth(-100); 26 | this.body.allowGravity = false; 27 | this.body.setVelocity(0, 0); 28 | this.direction = 0; 29 | this.y += 16; 30 | this.scene.tweens.add({ 31 | targets: this, 32 | y: this.y - 16, 33 | duration: 300 34 | }); 35 | } else if (this.type === 'coin') { 36 | this.body.setVelocity(0, 0); 37 | this.body.allowGravity = false; 38 | this.scene.tweens.add({ 39 | targets: this, 40 | y: this.y - 50, 41 | duration: 300, 42 | onComplete: () => { 43 | this.destroy(); 44 | } 45 | }); 46 | } 47 | 48 | this.anims.play(this.type); 49 | 50 | if (this.type === 'coin') { 51 | this.scene.sound.playAudioSprite('sfx', 'smb_coin'); 52 | } else { 53 | this.scene.sound.playAudioSprite('sfx', 'smb_powerup_appears'); 54 | this.scene.powerUps.add(this); 55 | } 56 | 57 | // this.scene.updateLoop.push(this); 58 | return this; 59 | } 60 | 61 | update() { 62 | if (this.alpha === 0) { 63 | this.scene.powerUps.remove(this); 64 | this.destroy(); 65 | return; 66 | } 67 | 68 | this.scene.physics.world.collide(this, this.scene.groundLayer); 69 | this.scene.physics.world.overlap(this, this.scene.mario, this.collected); 70 | 71 | if (!this.body) { 72 | return; 73 | } 74 | 75 | if (this.body.velocity.x === 0) { 76 | this.direction = -this.direction; 77 | this.body.velocity.x = this.direction; 78 | } 79 | if (this.type === 'star') { 80 | if (this.body.blocked.down) { 81 | this.body.velocity.y = -300; 82 | } 83 | } 84 | } 85 | 86 | collected(powerUp, mario) { 87 | if (mario.animSuffix === '' && powerUp.type === 'flower') { 88 | powerUp.type = 'mushroom'; 89 | } 90 | switch (powerUp.type) { 91 | case 'flower': 92 | mario.animSuffix = 'Fire'; 93 | powerUp.scene.sound.playAudioSprite('sfx', 'smb_powerup'); 94 | break; 95 | case 'mushroom': 96 | // Powerup will not be removed until next loop after physics is running again 97 | // (physics is paused by mario.resize), until then we'll just hide it. 98 | mario.resize(true); 99 | powerUp.scene.sound.playAudioSprite('sfx', 'smb_powerup'); 100 | break; 101 | case 'star': 102 | mario.star.active = true; 103 | mario.star.timer = 10000; 104 | powerUp.scene.sound.playAudioSprite('sfx', 'smb_powerup'); 105 | break; 106 | case '1up': 107 | powerUp.scene.sound.playAudioSprite('sfx', 'smb_1-up'); 108 | break; 109 | } 110 | // get points 111 | powerUp.scene.updateScore(1000); 112 | powerUp.alpha = 0; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/sprites/SMBTileSprite.js: -------------------------------------------------------------------------------- 1 | export default class SMBTileSprite extends Phaser.GameObjects.Sprite { 2 | constructor(config) { 3 | super(config.scene, -100, 0, 'tiles'); 4 | config.scene.add.existing(this); 5 | this.tile = null; 6 | this.scene = config.scene; 7 | this.play('brickTile'); 8 | this.alpha = 0; 9 | config.scene.physics.world.enable(this); 10 | this.body.allowGravity = false; 11 | } 12 | 13 | update() { 14 | // this.scene.physics.world.collide(this, this.scene.enemyGroup, ()=>{console.log('COLLIDED!')}); 15 | this.scene.enemyGroup.children.entries.forEach(enemy => { 16 | this.scene.physics.world.overlap(this, enemy, () => { 17 | enemy.starKilled(); 18 | }); 19 | }); 20 | 21 | /* this.scene.updateLoop.forEach( 22 | (sprite) => { sprite.update(delta); } 23 | ) */ 24 | } 25 | 26 | restart(tile) { 27 | let anim = 'brickTile'; 28 | this.tile = tile; 29 | this.tile.alpha = 0; 30 | this.alpha = 1; 31 | // tile 32 | if (tile.index === 44) { 33 | anim = 'blockTile'; 34 | } 35 | 36 | this.play(anim); 37 | this.x = this.tile.x * 16 + 8; 38 | this.y = this.tile.y * 16 + 8; 39 | this.scene.tweens.add({ 40 | targets: this, 41 | y: this.y - 8, 42 | yoyo: true, 43 | duration: 100, 44 | onUpdate: () => this.update(), 45 | onComplete: () => { 46 | this.tile.alpha = 1; 47 | this.x = -100; 48 | this.alpha = 0; 49 | } 50 | }); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/sprites/Turtle.js: -------------------------------------------------------------------------------- 1 | import Enemy from './Enemy'; 2 | 3 | export default class Turtle extends Enemy { 4 | constructor(config) { 5 | super(config); 6 | this.flipX = true; 7 | this.anims.play('turtle'); 8 | this.sliding = false; 9 | this.type = 'turtle'; 10 | this.body.setSize(12, 12); 11 | this.body.offset.set(2, 2); 12 | } 13 | 14 | update() { 15 | if (!this.activated()) { 16 | return; 17 | } 18 | if (this.sliding) { 19 | this.scene.physics.world.collide(this, this.scene.groundLayer, this.scene.tileCollision); 20 | this.scene.enemyGroup.children.entries.forEach((enemy) => { 21 | if (this !== enemy) { 22 | this.scene.physics.world.overlap(this, enemy, this.slidekill); 23 | } 24 | }); 25 | } else { 26 | this.scene.physics.world.collide(this, this.scene.groundLayer); 27 | } 28 | this.scene.physics.world.overlap(this, this.scene.mario, this.marioHit); 29 | if (this.body.velocity.x === 0) { 30 | this.direction = -this.direction; 31 | this.body.velocity.x = this.direction; 32 | this.flipX = this.direction < 0; 33 | } 34 | } 35 | 36 | slidekill(turtle, victim) { 37 | if (typeof victim.starKilled !== 'undefined') { 38 | victim.starKilled(); 39 | } 40 | } 41 | 42 | marioHit(enemy, mario) { 43 | // direction 44 | // den av overlap x or overlap y som är störst 45 | // let verticalHit = Math.abs(enemy.x-mario.x)