englercj / lttp Goto Github PK

An incomplete remake of The Legend of Zelda - A Link to the Past using WebGL and the browser.

License: MIT License

JavaScript 3.92% TypeScript 94.77% HTML 0.65% CSS 0.66%

lttp's Introduction

Lttp

This is a recreation of Nintendo's The Legend of Zelda: A Link to the Past. This is not a port of the game, this is not code conversion, this is not the ROM running in an emulator. This is a complete, written from scratch, recreation of one of my favorite classic games using WebGL in the browser. While I will try my hardest to preserve the spirit of the game, and to come as close to the original as I can; expect slight differences in gameplay, mechanics, and graphics.

This project is in no way endorsed by Nintendo. Most images, logos, characters, dialog, plot, and other assets taken from the original Link to the Past are copyrights of Nintendo; I claim no ownership of any of the assets taken from the original game.

This game is built with Phaser.

Building and running the game

When the project gets more stable I will host a playable version on GitHub Pages, but for now you need to build manually.

This project uses node for building and git-lfs for managing binary files. You will need to install both to work on this project.

After you have the dependencies above installed, clone this repository. If you already cloned this repository before installing git-lfs you can get the binary files by using git lfs pull after you have it installed properly.

Once you have the repostiory cloned, you can install dependencies and run the development server:

npm install && npm start

Resources

Below is a list of resources I used for game content. This including sprites, sounds, technical data, walkthroughs, mob information, and misc details of the game:

Return of Ganon Font - For dialog and other text
The Spriter's Resource - Used a couple sprites from here
LTTP Maps - maps of all the dungeons
SNES Maps - maps of all the dungeons
Zelda Wiki - Great source of information on game content and mechanics
Zelda Elements - Another good wiki-like source
nes-snes-sprites.com - Used for some character sprites

Roadmap

Below is a non-exhaustive TODO list for the project:

Signage
Lifting items
Fix drops
Add handling for gamepad axis sticks
Implement ERASE/COPY menu options in main menu
NPCs (generic npc loading from tmx)
Implement better level loading and manifest
Finish up ROG Font characters
Bosses and boss mechanics
First Dungeon (palace)
Intro dialog

License and Legal

This code-base is released under the MIT License.

All dependencies are released under their own respective licenses.

Most images, logos, characters, dialog, plot, and other assets taken from the original The Legend of Zelda: A Link to the Past are copyrights of Nintendo; I claim no ownership of any of the assets taken from the original game.

lttp's People

Contributors

Stargazers

Watchers

lttp's Issues

How to render TMX How to render TMX in ThreeJs plane?

Hi.
I have studied your project for more than a month.I tried to run the code but it didn't work. Would you give a complete example code about how to render TMX How to render TMX in ThreeJs plane?

TypeError: Cannot read property 'getFrameByName' of null

The game isn't working when trying to build and run it. In the browser's console there's an error with the content TypeError: Cannot read property 'getFrameByName' of null and the game shows basically a black screen. I can see only in the bottom of Phaser Debug (WebGL): with its numbers.

phaser.js:48262 TypeError: Cannot read property 'getFrameByName' of null
    at prepareFontData (ReturnOfGanon.ts:91)
    at new ReturnOfGanon (ReturnOfGanon.ts:16)
    at new Dialog (Dialog.ts:33)
    at Intro._createLoreGroup (Intro.ts:383)
    at Intro.create (Intro.ts:64)
    at Phaser.StateManager.loadComplete (phaser.js:6566)
    at Phaser.Loader.finishedLoading (phaser.js:47818)
    at Phaser.Loader.processLoadQueue (phaser.js:47775)
    at Phaser.Loader.asyncComplete (phaser.js:47848)
    at Phaser.Loader.Loader_jsonLoadComplete [as jsonLoadComplete] (browser.js:191)

Controls?

I'm not familiar with Phaser... I guess I need to get there.In the meantime, will you point me in the right direction for modifing the controls? F. N. Love it though mate. Really. You're missing a ; in math.ts

Cheers

Using wrong version of phaser-tiled

In the package.json it references 2.0.0, but the build is being generated with gulp, which I believe is set to ^1.2.1. I've got them side-by-side and they don't match.

PS. I'd like to help but I feel like there's a lot more moving parts than I would expect for a simple game. Don't get me wrong, LTTP and phaser-tiled are cool, but there seems to be some strange barriers to helping. 1) LESS. There's almost no CSS. Why? 2) EJS. There's almost no HTML. Why? 3) Gulp and webpack? I don't get it. 4) Inheriting Phaser classes makes it difficult to reason where things happening, in LTTP or in Phaser. 5) TypeScript - already a big step, and many JS devs will not bother with non-raw JS libraries, and the gains are questionable here - outside of the core game engine.

Primordials is not defined

I followed the readme and this fails at npm run and npm run-script build

$ npm run

> [email protected] start X:\Big_Code\lttp
> npm run dev


> [email protected] dev X:\Big_Code\lttp
> gulp clean && gulp dev

fs.js:39
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:39:5
    at req_ (X:\Big_Code\lttp\node_modules\natives\index.js:143:24)
    at Object.req [as require] (X:\Big_Code\lttp\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (X:\Big_Code\lttp\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (internal/modules/cjs/helpers.js:72:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `gulp clean && gulp dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Proto\AppData\Roaming\npm-cache\_logs\2020-10-16T02_17_50_669Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm run dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Proto\AppData\Roaming\npm-cache\_logs\2020-10-16T02_17_50_681Z-debug.log

Seems fs cannot require primordials but it is not a package as far as I can tell.

Build broken?

This is what happens when I run npm install && npm start, once it gets to gulp build serve it errors out like so:

> gulp build serve

[13:58:13] Using gulpfile ~/Desktop/lttp-phaser-master/gulpfile.js
[13:58:13] Starting 'less'...
[13:58:13] Starting 'scripts'...
[13:58:13] Starting 'copy:index'...
[13:58:13] Starting 'copy:vendor'...
[13:58:13] Starting 'assets:tilemap-pack'...
[13:58:13] Starting 'assets:imagemin'...
[13:58:13] Starting 'assets:jsonmin'...
[13:58:13] Starting 'assets:copy'...
[13:58:13] Starting 'serve'...
[13:58:13] Finished 'serve' after 53 ms

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: listen EADDRINUSE
    at errnoException (net.js:905:11)
    at Server._listen2 (net.js:1043:14)
    at listen (net.js:1065:10)
    at Server.listen (net.js:1139:5)
    at ConnectApp.server (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp-connect/index.js:57:19)
    at new ConnectApp (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp-connect/index.js:37:10)
    at Object.module.exports.server (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp-connect/index.js:170:12)
    at Gulp.<anonymous> (/Users/blah/Desktop/lttp-phaser-master/tasks/serve.js:8:20)
    at module.exports (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Users/blah/Desktop/lttp-phaser-master/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /Users/blah/Desktop/lttp-phaser-master/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:442:13)
    at Function.Module.runMain (module.js:499:11)
    at startup (node.js:119:16)
    at node.js:929:3

npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "start"
npm ERR! node v0.10.35
npm ERR! npm  v2.5.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `gulp build serve`
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp build serve'.
npm ERR! This is most likely a problem with the lttp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp build serve
npm ERR! You can get their info via:
npm ERR!     npm owner ls lttp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/blah/Desktop/lttp-phaser-master/npm-debug.log

And the npm-debug looks like this:

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: `gulp build serve`
9 verbose stack Exit status 8
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:98:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack     at ChildProcess.emit (events.js:98:17)
9 verbose stack     at maybeClose (child_process.js:766:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:833:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/blah/Desktop/lttp-phaser-master
12 error Darwin 14.1.0
13 error argv "node" "/usr/local/bin/npm" "start"
14 error node v0.10.35
15 error npm  v2.5.1
16 error code ELIFECYCLE
17 error [email protected] start: `gulp build serve`
17 error Exit status 8
18 error Failed at the [email protected] start script 'gulp build serve'.
18 error This is most likely a problem with the lttp package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     gulp build serve
18 error You can get their info via:
18 error     npm owner ls lttp
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Do you know what might be happening? Does your build work?

Can you possible add a build to the repo so I can at least see that running version?

Thanks so much! I would really love to get this up and running...

gulp clean && gulp dev fails on my system (OS X version 10.9.5 running npm version 2.11.3)

I'm running npm version 2.11.3 on OS X version 10.9.5.

Running npm install && npm start works for awhile, but fails eventually on the following line:

> gulp clean && gulp dev

Then all these errors occur:

/Users/.../Documents/git/lttp/gulpfile.js:7
const gulp      = require('gulp');
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Liftoff.handleArguments (/Users/.../Documents/git/lttp/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/Users/.../Documents/git/lttp/node_modules/gulp/node_modules/liftoff/index.js:193:16)
    at module.exports (/Users/.../Documents/git/lttp/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `gulp clean && gulp dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'gulp clean && gulp dev'.
npm ERR! This is most likely a problem with the lttp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp clean && gulp dev
npm ERR! You can get their info via:
npm ERR!     npm owner ls lttp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /Users/.../Documents/git/lttp/npm-debug.log
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "start"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `npm run dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'npm run dev'.
npm ERR! This is most likely a problem with the lttp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run dev
npm ERR! You can get their info via:
npm ERR!     npm owner ls lttp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /Users/.../Documents/git/lttp/npm-debug.log`

FYI - this is the content of the npm-debug.log file:

`0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: `npm run dev`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/.../Documents/git/lttp
12 error Darwin 13.4.0
13 error argv "node" "/usr/local/bin/npm" "start"
14 error node v0.12.7
15 error npm  v2.11.3
16 error code ELIFECYCLE
17 error [email protected] start: `npm run dev`
17 error Exit status 1
18 error Failed at the [email protected] start script 'npm run dev'.
18 error This is most likely a problem with the lttp package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     npm run dev
18 error You can get their info via:
18 error     npm owner ls lttp
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Can't find phaser-tiled 2.0.0

Hey, it seems like package.json is referencing a version of phaser-tiled that doesn't exist. I've tried with 1.4.1 too and I run into a bunch of other issues with font resources. Is there a version of lttp that is known to be working? Cheers!

2 JavaScript Errors

Got everything installed and running!

However, I'm seeing the following 2 JavaScript errors in the browser's dev console (and nothing appears to load in the main content section):

JavaScript Error 1
undefined:1 Uncaught (in promise) DOMException: Unable to decode audio data
Phaser.Loader - image[lw_minimap_tileset_lw_minimap_tileset.png]: error loading asset from URL assets/levels/minimaps/lw_minimap_tileset.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: background.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: logo.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: sword.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_particles" not found in Cache.
phaser.js:42240 Cannot set frameName: swordshine/shine.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: zpart.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_particles" not found in Cache.
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: lore_img1.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: lore_img2.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: lore_img3.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_intro" not found in Cache.
phaser.js:42240 Cannot set frameName: lore_img4.png
phaser.js:44910 Phaser.Cache.getImage: Key "sprite_gui" not found in Cache.
phaser.js:42240 Cannot set frameName: dialog.png
phaser.js:44910 Phaser.Cache.getFrameData: Key "sprite_rog_font" not found in Cache.

JavaScript Error 2
Uncaught TypeError: Cannot read property 'getFrameByName' of null
prepareFontData @ ReturnOfGanon.ts:9
ReturnOfGanon @ ReturnOfGanon.ts:16
Dialog @ Dialog.ts:33
Intro._createLoreGroup @ Intro.ts:383
Intro.create @ Intro.ts:64
Phaser.StateManager.loadComplete @ phaser.js:6566
Phaser.Loader.finishedLoading @ phaser.js:47818
Phaser.Loader.processLoadQueue @ phaser.js:47775
Phaser.Loader.asyncComplete @ phaser.js:47848
Phaser.Loader.fileError @ phaser.js:48519
file.data.onerror @ phaser.js:48116