mirror of
https://github.com/isledecomp/isle.pizza.git
synced 2026-01-10 18:21:15 +00:00
882 lines
65 KiB
HTML
882 lines
65 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>LEGO® Island</title>
|
||
|
||
<link rel="preload" href="style.css" as="style">
|
||
<link rel="preload" href="app.js" as="script">
|
||
<link rel="preload" href="isle.js" as="script">
|
||
<link rel="preload" href="isle.wasm" as="fetch" crossorigin>
|
||
<link rel="preload" href="install.webp" as="image">
|
||
<link rel="preload" href="island.webp" as="image">
|
||
<link rel="preload" href="bonus.webp" as="image">
|
||
|
||
<meta name="description"
|
||
content="Play the classic 1997 PC game LEGO® Island directly in your web browser! This fan-made web port, built with Emscripten from the isledecomp project, brings the beloved adventure back to life.">
|
||
<meta name="keywords"
|
||
content="LEGO Island, LEGO, classic game, 1997, web port, browser game, Emscripten, isledecomp, retro gaming, play online, Infomaniac, Brickster, Pepper Roni">
|
||
<meta name="author" content="isledecomp/isle.pizza">
|
||
<meta name="robots" content="index, follow">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:url" content="https://isle.pizza/">
|
||
<meta name="twitter:title" content="LEGO® Island - Online Web Port">
|
||
<meta name="twitter:description" content="Play the classic 1997 PC game LEGO® Island directly in your web browser!">
|
||
<meta name="twitter:image" content="https://isle.pizza/island.webp">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://isle.pizza/">
|
||
<meta property="og:title" content="LEGO® Island - Online Web Port">
|
||
<meta property="og:description" content="Play the classic 1997 PC game LEGO® Island directly in your web browser!">
|
||
<meta property="og:image" content="https://isle.pizza/island.webp">
|
||
<meta property="og:site_name" content="LEGO Island Web Port">
|
||
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="icon" type="image/png" href="favicon.png">
|
||
<link rel="canonical" href="https://isle.pizza">
|
||
</head>
|
||
|
||
<body>
|
||
<div id="goodbye-popup" class="notification-popup" style="display: none;">
|
||
<div class="notification-popup-content">
|
||
<button id="goodbye-cancel-btn" class="update-dismiss-btn" aria-label="Cancel">×</button>
|
||
<div class="update-speech-bubble">
|
||
<p class="update-message">See you later, Brickulator!</p>
|
||
<div class="goodbye-progress">
|
||
<div class="goodbye-progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img src="later.webp" alt="Goodbye" class="update-character" width="150" height="187">
|
||
</div>
|
||
|
||
<div id="update-popup" class="notification-popup" style="display: none;">
|
||
<div class="notification-popup-content">
|
||
<button id="update-dismiss-btn" class="update-dismiss-btn" aria-label="Dismiss">×</button>
|
||
<div class="update-speech-bubble">
|
||
<p class="update-message">A new version just arrived!</p>
|
||
<button id="update-reload-btn" class="update-reload-btn">Reload Now</button>
|
||
</div>
|
||
</div>
|
||
<img src="bonus.webp" alt="Pepper" class="update-character" width="150" height="187">
|
||
</div>
|
||
|
||
<div id="main-container">
|
||
<div id="top-content">
|
||
<div class="video-container">
|
||
<img id="install-video" width="260" height="260" src="install.webp" alt="Install Game">
|
||
<audio id="install-audio" loop preload="none">
|
||
<source src="install.mp3" type="audio/mpeg">
|
||
Your browser does not support the audio tag.
|
||
</audio>
|
||
<span id="sound-toggle-emoji" title="Unmute Audio">🔇</span>
|
||
</div>
|
||
<img id="island-logo-img" width="567" height="198" src="island.webp" alt="Lego Island Logo">
|
||
</div>
|
||
|
||
<div id="controls-wrapper">
|
||
<img class="control-img" width="135" height="164" id="run-game-btn" src="run_game_off.webp" alt="Run Game"
|
||
data-off="run_game_off.webp" data-on="run_game_on.webp">
|
||
<img class="control-img" width="130" height="147" id="configure-btn" src="configure_off.webp"
|
||
alt="Configure" data-off="configure_off.webp" data-on="configure_on.webp" data-target="#configure-page">
|
||
<img class="control-img" width="134" height="149" id="free-stuff-btn" src="free_stuff_off.webp"
|
||
alt="Free Stuff" data-off="free_stuff_off.webp" data-on="free_stuff_on.webp"
|
||
data-target="#free-stuff-page">
|
||
<img class="control-img" width="134" height="149" id="read-me-btn" src="read_me_off.webp" alt="Read Me"
|
||
data-off="read_me_off.webp" data-on="read_me_on.webp" data-target="#read-me-page">
|
||
<img class="control-img" width="93" height="145" id="cancel-btn" src="cancel_off.webp" alt="Cancel"
|
||
data-off="cancel_off.webp" data-on="cancel_on.webp">
|
||
</div>
|
||
|
||
<div id="read-me-page" class="page-content">
|
||
<span class="page-back-button" role="button" aria-label="Go back to main menu">← Back</span>
|
||
<div class="page-inner-content">
|
||
<h1>Read Me</h1>
|
||
|
||
<div class="readme-tabs">
|
||
<div class="tab-buttons">
|
||
<button class="tab-btn active" data-tab="about">
|
||
<img src="register.webp" alt="" class="tab-icon">
|
||
<span>About</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="system">
|
||
<img src="sysinfo.webp" alt="" class="tab-icon">
|
||
<span>System</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="faq">
|
||
<img src="getinfo.webp" alt="" class="tab-icon">
|
||
<span>FAQ</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="changelog">
|
||
<img src="callfail.webp" alt="" class="tab-icon">
|
||
<span>Changelog</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="manual">
|
||
<img src="bonus.webp" alt="" class="tab-icon">
|
||
<span>Manual</span>
|
||
</button>
|
||
<button class="tab-btn" data-tab="voices" style="display: none;">
|
||
<img src="send.webp" alt="" class="tab-icon">
|
||
<span>Voices</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tab-panel active" id="tab-about">
|
||
<p>Welcome to the LEGO Island web port project! This is a recreation of the classic 1997 PC game,
|
||
rebuilt to run in modern web browsers using Emscripten and WebAssembly.</p>
|
||
<p>This incredible project stands on the shoulders of giants. It was made possible by the original <a
|
||
href="https://github.com/isledecomp/isle" target="_blank"
|
||
rel="noopener noreferrer">decompilation project</a>, which achieved 100% decompilation of the
|
||
original game. This was then adapted into a <a
|
||
href="https://github.com/isledecomp/isle-portable" target="_blank"
|
||
rel="noopener noreferrer">portable version</a> that eliminated all Windows dependencies and
|
||
replaced them with modern, cross-platform alternatives.</p>
|
||
<p>The technical work involved replacing Windows-specific systems with SDL for window management and input,
|
||
migrating audio from DirectSound to the miniaudio library, converting Windows Registry configuration
|
||
to INI files, and creating a modular graphics layer supporting multiple rendering backends including
|
||
WebGL. This represents years of effort from many awesome contributors dedicated to preserving this
|
||
piece of gaming history.</p>
|
||
<p>Thanks to this work, LEGO Island now runs on over 10 platforms including Windows, Linux, macOS, iOS,
|
||
Android, Nintendo Switch, PlayStation Vita, and of course, web browsers. The web version uses the
|
||
original, unmodified Interleaf streaming code, enabling progressive content loading just like the
|
||
original CD-ROM.</p>
|
||
<p>Our goal is to make this classic accessible to everyone. The project is still in development, so you
|
||
may encounter bugs. Your patience and feedback are greatly appreciated!</p>
|
||
</div>
|
||
|
||
<div class="tab-panel" id="tab-system">
|
||
<div class="requirements-section">
|
||
<h3>Supported Browsers</h3>
|
||
<p>This game requires a modern browser with WebAssembly multi-threading support. The following browsers are supported:</p>
|
||
<ul class="requirements-list">
|
||
<li><strong>Chrome</strong> — version 95 or newer</li>
|
||
<li><strong>Firefox</strong> — version 92 or newer</li>
|
||
<li><strong>Edge</strong> — version 95 or newer</li>
|
||
<li><strong>Safari</strong> — version 15.4 or newer (iOS 18+ recommended)</li>
|
||
</ul>
|
||
<p class="requirements-note">For the best experience, keep your browser updated to the latest version.</p>
|
||
</div>
|
||
|
||
<div class="requirements-section">
|
||
<h3>Input Methods</h3>
|
||
<p>The game supports multiple ways to play. Visit the Configure page to adjust your control preferences.</p>
|
||
<ul class="requirements-list">
|
||
<li><strong>Keyboard & Mouse</strong> — Traditional desktop controls using arrow keys or WASD</li>
|
||
<li><strong>Gamepad</strong> — Controller support with analog sticks and D-pad</li>
|
||
<li><strong>Touch Screen</strong> — Mobile-friendly controls with configurable schemes</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="requirements-section">
|
||
<h3>Audio</h3>
|
||
<p>Audio hardware is recommended for the full experience. If the game is silent, click the mute icon
|
||
(🔇) on the animated intro to enable sound. Modern browsers require user interaction before playing audio.</p>
|
||
</div>
|
||
|
||
<div class="requirements-section">
|
||
<h3>Storage & Network</h3>
|
||
<p>The game streams approximately <strong>25MB</strong> of data on first load (more with extensions enabled).
|
||
For offline play, you can install the full game (about <strong>550MB</strong>) via the Configure menu.
|
||
A stable internet connection is recommended for initial loading.</p>
|
||
</div>
|
||
|
||
<div class="requirements-section">
|
||
<h3>Performance Tips</h3>
|
||
<ul class="requirements-list">
|
||
<li>Close other browser tabs to free up memory</li>
|
||
<li>Use hardware acceleration (enabled by default in most browsers)</li>
|
||
<li>On mobile, ensure your device isn't in low-power mode</li>
|
||
<li>If experiencing lag, try reducing the resolution in Configure</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-panel" id="tab-faq">
|
||
<details>
|
||
<summary>Is this the full, original game?</summary>
|
||
<p>This is a complete port of the original 1997 PC game. You can select from multiple languages,
|
||
including both the 1.0 and 1.1 versions of English, from the "Configure" menu before
|
||
starting.</p>
|
||
</details>
|
||
<details>
|
||
<summary>How does this differ from the original 1997 CD-ROM game?</summary>
|
||
<p>The core gameplay is identical, but this version has some great advantages! It runs in your
|
||
browser with no installation needed and works on modern devices. It also includes
|
||
enhancements like widescreen support, improved controls, many bug fixes from the
|
||
decompilation project, and the ability to run at your display's maximum resolution (even
|
||
4K!).</p>
|
||
<p>Check out the "Configure" page to see what's possible.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Can I save my progress?</summary>
|
||
<p>Yes! The game automatically saves your progress. To ensure your game is saved, return to the
|
||
Infocenter and use the exit door. This will bring you back to the main menu and lock in your
|
||
save state. A "best effort" save is also attempted if you close the tab directly, but this
|
||
method isn't always guaranteed.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Does this run on mobile?</summary>
|
||
<p>Yes! The game is designed to work on a wide range of devices, including desktops, laptops,
|
||
tablets, and phones. It has even been seen running on <a
|
||
href="https://github.com/isledecomp/isle-portable/issues/418#issuecomment-3003572219"
|
||
target="_blank" rel="noopener noreferrer">Tesla in-car browsers</a>! 🚗</p>
|
||
</details>
|
||
<details>
|
||
<summary>Which browsers are supported?</summary>
|
||
<p>This port runs best on recent versions of modern browsers, including Chrome, Firefox, and
|
||
Safari. For an optimal experience on iOS devices, please ensure you are running iOS 18 or
|
||
newer.</p>
|
||
</details>
|
||
<details>
|
||
<summary>What are the controls?</summary>
|
||
<p>You can play using a keyboard and mouse, a gamepad, or a touch screen. Gamepad support can
|
||
vary depending on your browser. On mobile, you can select your preferred touch control
|
||
scheme in the "Configure" menu.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Can I play offline?</summary>
|
||
<p>You bet! In the "Configure" menu, scroll to the "Offline Play" section. You'll find an option
|
||
there to install all necessary game files (about 550MB) for offline access.</p>
|
||
</details>
|
||
<details>
|
||
<summary>I don't hear any sound or music. How do I fix it?</summary>
|
||
<p>Most modern browsers block audio until you interact with the page. Click the mute icon (🔇)
|
||
on the animated intro to enable sound.</p>
|
||
</details>
|
||
<details>
|
||
<summary>I think I found a bug! Where do I report it?</summary>
|
||
<p>As an active development project, some bugs are expected. If you find one, we'd be grateful
|
||
if you'd report it on the isle-portable <a
|
||
href="https://github.com/isledecomp/isle-portable/issues" target="_blank"
|
||
rel="noopener noreferrer">GitHub Issues page</a>. Please include details about your
|
||
browser, device, and what you were doing when the bug occurred.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Is this project open-source?</summary>
|
||
<p>Yes, absolutely! This web port is built upon the incredible open-source <a
|
||
href="https://github.com/isledecomp/isle-portable" target="_blank"
|
||
rel="noopener noreferrer">LEGO Island (portable)</a> project, and the code for this
|
||
website is also <a href="https://github.com/isledecomp/isle.pizza" target="_blank"
|
||
rel="noopener noreferrer">available here</a>.</p>
|
||
</details>
|
||
</div>
|
||
|
||
<div class="tab-panel" id="tab-changelog">
|
||
<details>
|
||
<summary>January 2026</summary>
|
||
<ul>
|
||
<li><strong>New:</strong> Debug menu for developers and power users. Tap the LEGO Island logo 5 times to unlock OGEL mode and access debug features like teleporting to locations, switching acts, and playing animations</li>
|
||
<li><strong>Improved:</strong> Configure page redesigned with tabbed navigation, collapsible sections, quick presets (Classic/Modern Mode), and modern toggle switches</li>
|
||
<li><strong>Improved:</strong> Read Me page reorganized into tabs (About, System, FAQ, Changelog, Manual) with the original instruction manual now viewable in-browser</li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>December 2025</summary>
|
||
<ul>
|
||
<li><strong>New:</strong> "Active in Background" option keeps the game running when the tab loses focus</li>
|
||
<li><strong>New:</strong> WASD navigation controls as an alternative to arrow keys</li>
|
||
<li><strong>Fixed:</strong> Act 3 helicopter ammo now correctly sticks to targets and finishes animations</li>
|
||
<li><strong>Fixed:</strong> Pick/click distance calculation for more accurate object selection</li>
|
||
<li><strong>Fixed:</strong> Maximum deltaTime capping prevents physics glitches in races</li>
|
||
<li><strong>Fixed:</strong> Touch controls now properly support widescreen aspect ratios</li>
|
||
<li><strong>Improved:</strong> Default anisotropic filtering increased to 16x for sharper textures</li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>November 2025</summary>
|
||
<ul>
|
||
<li><strong>Fixed:</strong> Dictionary loading failure no longer causes crashes</li>
|
||
<li><strong>Fixed:</strong> INI configuration now properly applies defaults when values are missing</li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>September 2025</summary>
|
||
<ul>
|
||
<li><strong>New:</strong> Additional widescreen background images</li>
|
||
<li><strong>Fixed:</strong> Jukebox state now correctly restored when using HD Music extension</li>
|
||
<li><strong>Fixed:</strong> Background audio no longer gets stuck when starting audio fails</li>
|
||
<li><strong>Improved:</strong> SI Loader actions now start at the correct time during world loading</li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>August 2025</summary>
|
||
<ul>
|
||
<li><strong>New:</strong> Extended Bad Ending FMV extension shows the uncut beta animation</li>
|
||
<li><strong>New:</strong> HD Music extension with high-quality audio</li>
|
||
<li><strong>New:</strong> Widescreen backgrounds extension eliminates 3D edges on wide displays</li>
|
||
<li><strong>New:</strong> SI Loader extension system for community content and modifications</li>
|
||
<li><strong>New:</strong> OpenGL ES 2.0/3.0 renderer for broader device compatibility</li>
|
||
<li><strong>Fixed:</strong> Purple edges no longer appear on scaled transparent 2D elements</li>
|
||
<li><strong>Fixed:</strong> Transparent pixels now render correctly with alpha channel support</li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>July 2025</summary>
|
||
<ul>
|
||
<li><strong>New:</strong> HD Textures extension with enhanced visuals</li>
|
||
<li><strong>New:</strong> MSAA anti-aliasing support for smoother edges</li>
|
||
<li><strong>New:</strong> Anisotropic filtering for sharper textures at angles</li>
|
||
<li><strong>New:</strong> Haptic feedback (vibration) support for gamepads and mobile devices</li>
|
||
<li><strong>New:</strong> Virtual Gamepad touch control scheme with sliding controls</li>
|
||
<li><strong>New:</strong> Gamepad/controller support with analog sticks and D-pad</li>
|
||
<li><strong>New:</strong> Full screen mode with in-game toggle</li>
|
||
<li><strong>New:</strong> Maximum LOD and Maximum Actors configuration options</li>
|
||
<li><strong>New:</strong> Configurable transition animations (Mosaic, Dissolve, Wipe, etc.)</li>
|
||
<li><strong>New:</strong> Extensions system allowing community-created content</li>
|
||
<li><strong>Fixed:</strong> WebGL driver compatibility issues resolved</li>
|
||
<li><strong>Fixed:</strong> Firefox Private browsing mode now works correctly</li>
|
||
<li><strong>Fixed:</strong> Virtual cursor transparency and positioning</li>
|
||
<li><strong>Fixed:</strong> Touch coordinate translation for proper viewport mapping</li>
|
||
<li><strong>Fixed:</strong> Memory leaks in ViewLODList</li>
|
||
<li><strong>Fixed:</strong> Screen transitions on software renderer and 32-bit displays</li>
|
||
<li><strong>Fixed:</strong> Tabbing in and out of fullscreen</li>
|
||
<li><strong>Fixed:</strong> Click spam prevention on touch screens</li>
|
||
<li><strong>Improved:</strong> Mosaic transition animation is faster and cleaner</li>
|
||
<li><strong>Improved:</strong> Loading UX for HD Textures with progress indicators</li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>June 2025 — Initial Release</summary>
|
||
<ul>
|
||
<li><strong>New:</strong> Emscripten web port — play LEGO Island directly in your browser!</li>
|
||
<li><strong>New:</strong> WebGL rendering for hardware-accelerated 3D graphics</li>
|
||
<li><strong>New:</strong> Software renderer fallback for devices without WebGL</li>
|
||
<li><strong>New:</strong> 32-bit color support for improved visual quality</li>
|
||
<li><strong>New:</strong> Full screen support</li>
|
||
<li><strong>New:</strong> Joystick/gamepad enabled by default</li>
|
||
<li><strong>New:</strong> Option to skip the startup delay</li>
|
||
<li><strong>New:</strong> Support for LEGO Island 1.0 version</li>
|
||
<li><strong>New:</strong> FPS display option</li>
|
||
<li><strong>New:</strong> Game runs without requiring an audio device</li>
|
||
<li><strong>Fixed:</strong> Infocenter to Act 2/Act 3 transition issues</li>
|
||
<li><strong>Fixed:</strong> Race initialization errors</li>
|
||
<li><strong>Fixed:</strong> Jetski race startup issues</li>
|
||
<li><strong>Fixed:</strong> Plant creation bug in LegoPlantManager</li>
|
||
<li><strong>Fixed:</strong> Late-game "sawtooth" audio glitches</li>
|
||
<li><strong>Fixed:</strong> Building variant switching (Pepper's buildings)</li>
|
||
<li><strong>Fixed:</strong> OpenGL rendering issues</li>
|
||
<li><strong>Fixed:</strong> Image serialization bugs</li>
|
||
<li><strong>Improved:</strong> Transparent objects now render correctly (sorted last)</li>
|
||
<li><strong>Improved:</strong> GPU mesh uploading via VBOs for better performance</li>
|
||
<li><strong>Improved:</strong> Backface culling enabled for faster rendering</li>
|
||
<li><strong>Improved:</strong> SIMD-optimized z-buffer clearing</li>
|
||
<li><strong>Improved:</strong> Edge-walking triangle rasterization</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
|
||
<div class="tab-panel" id="tab-manual">
|
||
<div class="manual-container">
|
||
<p class="manual-description">The original 15-page instruction manual from the 1997 CD-ROM release.</p>
|
||
<a href="comic.pdf" target="_blank" rel="noopener" class="manual-open-btn">Open Manual in New Tab</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-panel" id="tab-voices">
|
||
<p class="voices-intro">Reactions from the original LEGO Island development team:</p>
|
||
<div class="voices-grid">
|
||
<blockquote class="voice-card">
|
||
<p>This is just fantastic! What an endeavor! It is a wonderful tribute to a team that was
|
||
unparalleled in talent, and we should now include you and your team in that august group.
|
||
I really wish Wes was around to see it. Keep us posted on updates...</p>
|
||
<footer>Scott Anderson</footer>
|
||
</blockquote>
|
||
<blockquote class="voice-card">
|
||
<p>Wow; what a trip. My first trial was on my mac; which had problems displaying any of the
|
||
bitmaps applied to the characters in the safari web browser. But it ran, with some
|
||
navigation frustrations. But being delivered over the web means any fix you make goes out
|
||
immediately. I want you all to know it was a joy to work on and how grateful I am to have
|
||
been a part of the origin. I hope you are getting joy from working on it and keeping it alive.</p>
|
||
<footer>Dennis Goodrow</footer>
|
||
</blockquote>
|
||
<blockquote class="voice-card">
|
||
<p>This is pretty neat. At least as responsive over the web as the game was on the target
|
||
machines of the time! I hadn't heard of WebAssembly until now. What kind of changes to
|
||
the source were needed to get it working under WebAssembly? I foresee many hours of my
|
||
time being used up experimenting with this tool!</p>
|
||
<footer>Jim Brown</footer>
|
||
</blockquote>
|
||
<blockquote class="voice-card">
|
||
<p>Well done and such fun tapping back into such fond creative memories.</p>
|
||
<footer>Paul Melmed</footer>
|
||
</blockquote>
|
||
<blockquote class="voice-card">
|
||
<p>That's awesome!</p>
|
||
<footer>Randy Chou</footer>
|
||
</blockquote>
|
||
<blockquote class="voice-card">
|
||
<p>Fantastic! Love it.</p>
|
||
<footer>Kevin Byall</footer>
|
||
</blockquote>
|
||
<blockquote class="voice-card">
|
||
<p>Great stuff!</p>
|
||
<footer>Dave Cherry</footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="configure-page" class="page-content">
|
||
<span class="page-back-button" role="button" aria-label="Go back to main menu">← Back</span>
|
||
<blockquote id="opfs-disabled" class="error-box" style="display:none;">
|
||
<p>OPFS is disabled in this browser. Default configuration will apply. If you are using a Firefox
|
||
Private window, please change to a regular window instead to change configuration.</p>
|
||
</blockquote>
|
||
<div class="page-inner-content config-layout">
|
||
<div class="config-art-panel">
|
||
<img src="shark.webp" alt="LEGO Island Shark and Brickster">
|
||
</div>
|
||
<div class="config-main">
|
||
<div class="config-presets">
|
||
<button type="button" class="preset-btn" id="preset-classic">Classic Mode</button>
|
||
<button type="button" class="preset-btn" id="preset-modern">Modern Mode</button>
|
||
</div>
|
||
<div class="config-tabs">
|
||
<div class="config-tab-buttons">
|
||
<button class="config-tab-btn active" data-config-tab="display">Display</button>
|
||
<button class="config-tab-btn" data-config-tab="controls">Controls</button>
|
||
<button class="config-tab-btn" data-config-tab="audio">Audio</button>
|
||
<button class="config-tab-btn" data-config-tab="extras">Extras</button>
|
||
</div>
|
||
<form id="config-form" class="config-form">
|
||
<div class="config-tab-panel active" id="config-tab-display">
|
||
<details class="config-section-card" open>
|
||
<summary class="config-card-header">Game</summary>
|
||
<div class="config-card-content">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-group-label">Version</label>
|
||
<div class="select-wrapper">
|
||
<select id="language-select" name="Language">
|
||
<option value="da">Danish</option>
|
||
<option value="el">English (1.0)</option>
|
||
<option value="en" selected>English (1.1)</option>
|
||
<option value="fr">French</option>
|
||
<option value="de">German</option>
|
||
<option value="it">Italian</option>
|
||
<option value="jp">Japanese</option>
|
||
<option value="ko">Korean</option>
|
||
<option value="pt">Portuguese</option>
|
||
<option value="ru">Russian</option>
|
||
<option value="es">Spanish</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="window-form">
|
||
<label class="form-group-label">Window</label>
|
||
<div class="radio-group option-list">
|
||
<div class="option-item">
|
||
<input type="radio" id="window-windowed" name="window" data-not-ini="true" checked>
|
||
<label for="window-windowed">Windowed</label>
|
||
</div>
|
||
<div class="option-item">
|
||
<input type="radio" id="window-fullscreen" name="window" data-not-ini="true">
|
||
<label for="window-fullscreen">Full Screen</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label">
|
||
Aspect Ratio
|
||
<span class="tooltip-trigger">?
|
||
<span class="tooltip-content">Choose Original (4:3) to preserve the classic aspect ratio with black bars, or select Widescreen to stretch the image to fit your display.</span>
|
||
</span>
|
||
</label>
|
||
<div class="radio-group option-list">
|
||
<div class="option-item">
|
||
<input type="radio" id="aspect-original" value="1" name="Original Aspect Ratio" checked>
|
||
<label for="aspect-original">Original (4:3)</label>
|
||
</div>
|
||
<div class="option-item">
|
||
<input type="radio" id="aspect-wide" value="0" name="Original Aspect Ratio">
|
||
<label for="aspect-wide">Widescreen</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label">
|
||
Resolution
|
||
<span class="tooltip-trigger">?
|
||
<span class="tooltip-content">Choose Original (640 x 480) to preserve the classic resolution, or select Maximum to render in the highest quality.</span>
|
||
</span>
|
||
</label>
|
||
<div class="radio-group option-list">
|
||
<div class="option-item">
|
||
<input type="radio" id="resolution-original" value="1" name="Original Resolution" checked>
|
||
<label for="resolution-original">Original (640 x 480)</label>
|
||
</div>
|
||
<div class="option-item">
|
||
<input type="radio" id="resolution-wide" value="0" name="Original Resolution">
|
||
<label for="resolution-wide">Maximum</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
<details class="config-section-card">
|
||
<summary class="config-card-header">Detail</summary>
|
||
<div class="config-card-content">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-group-label">
|
||
Island Model Quality
|
||
<span class="tooltip-trigger">?
|
||
<span class="tooltip-content">Note: using the "Low" setting will cause the island to disappear. This is not a bug, but the same behavior as present in the original game.</span>
|
||
</span>
|
||
</label>
|
||
<div class="radio-group option-list">
|
||
<div class="option-item">
|
||
<input type="radio" id="gfx-low" name="Island Quality" value="0">
|
||
<label for="gfx-low">Low</label>
|
||
</div>
|
||
<div class="option-item">
|
||
<input type="radio" id="gfx-med" name="Island Quality" value="1">
|
||
<label for="gfx-med">Medium</label>
|
||
</div>
|
||
<div class="option-item">
|
||
<input type="radio" id="gfx-high" name="Island Quality" value="2" checked>
|
||
<label for="gfx-high">High</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label">Island Texture Quality</label>
|
||
<div class="radio-group option-list">
|
||
<div class="option-item">
|
||
<input type="radio" id="tex-low" name="Island Texture" value="0">
|
||
<label for="tex-low">Low</label>
|
||
</div>
|
||
<div class="option-item">
|
||
<input type="radio" id="tex-high" name="Island Texture" value="1" checked>
|
||
<label for="tex-high">High</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label" for="max-lod">
|
||
Maximum LOD
|
||
<span class="tooltip-trigger">?
|
||
<span class="tooltip-content">Maximum Level of Detail (LOD). A higher setting will cause higher quality textures to be drawn regardless of distance.</span>
|
||
</span>
|
||
</label>
|
||
<input type="range" id="max-lod" name="Max LOD" min="0" max="6" step="0.1" value="3.6">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label" for="max-allowed-extras">
|
||
Maximum actors (5..40)
|
||
<span class="tooltip-trigger">?
|
||
<span class="tooltip-content">Maximum number of LEGO actors to exist in the world at a time. The game will gradually increase the number of actors until this maximum is reached and while performance is acceptable.</span>
|
||
</span>
|
||
</label>
|
||
<input type="range" id="max-allowed-extras" name="Max Allowed Extras" min="5" max="40" value="20">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
<details class="config-section-card">
|
||
<summary class="config-card-header">Graphics</summary>
|
||
<div class="config-card-content">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-group-label">Renderer</label>
|
||
<div class="select-wrapper">
|
||
<select id="renderer-select" name="3D Device ID">
|
||
<option value="0 0x682656f3 0x0 0x0 0x2000000">Software</option>
|
||
<option value="0 0x682656f3 0x0 0x0 0x4000000" selected>WebGL</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label">Transition Type</label>
|
||
<div class="select-wrapper">
|
||
<select id="transition-type-select" name="Transition Type">
|
||
<option value="1">No Animation</option>
|
||
<option value="2">Dissolve</option>
|
||
<option value="3" selected>Mosaic</option>
|
||
<option value="4">Wipe Down</option>
|
||
<option value="5">Windows</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label">Anti-aliasing</label>
|
||
<div class="select-wrapper">
|
||
<select id="msaa-select" name="MSAA"></select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-group-label">Anisotropic filtering</label>
|
||
<div class="select-wrapper">
|
||
<select id="anisotropic-select" name="Anisotropic"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="config-tab-panel" id="config-tab-controls">
|
||
<details class="config-section-card" open>
|
||
<summary class="config-card-header">Input</summary>
|
||
<div class="config-card-content">
|
||
<div class="form-grid">
|
||
<div class="form-group" id="touch-section">
|
||
<label class="form-group-label">
|
||
Touch Control Scheme
|
||
<span class="tooltip-trigger">?
|
||
<span class="tooltip-content">
|
||
<div><strong>Virtual Gamepad (Recommended):</strong> Slide your finger to move and turn.</div><br>
|
||
<div><strong>Virtual Arrow Keys:</strong> Tap screen areas to move. The top moves forward, the bottom turns or moves back.</div><br>
|
||
<div><strong>Virtual Mouse:</strong> Emulates classic mouse controls with touch.</div>
|
||
</span>
|
||
</span>
|
||
</label>
|
||
<div class="select-wrapper">
|
||
<select id="touch-type-select" name="Touch Scheme">
|
||
<option value="0">Virtual Mouse</option>
|
||
<option value="1">Virtual Arrow Keys</option>
|
||
<option value="2" selected>Virtual Gamepad</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="toggle-group">
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-haptic" name="Haptic" checked><span class="toggle-slider"></span><span class="toggle-label">Haptic feedback</span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">On supported devices and browsers, this provides physical feedback, like a vibration, while you play the game.</span></span>
|
||
</div>
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-wasd" name="WASD"><span class="toggle-slider"></span><span class="toggle-label">Use WASD for navigation</span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Use the WASD keys instead of the arrow keys to control the game, much akin to a modern PC game.</span></span>
|
||
</div>
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-active-in-bg" name="Active in Background"><span class="toggle-slider"></span><span class="toggle-label">Active in background</span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Keeps the game running even when it's in the background.</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="config-tab-panel" id="config-tab-audio">
|
||
<details class="config-section-card" open>
|
||
<summary class="config-card-header">Sound</summary>
|
||
<div class="config-card-content">
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="check-music" name="Music" checked>
|
||
<span class="toggle-slider"></span>
|
||
<span class="toggle-label">Music</span>
|
||
</label>
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="check-3d-sound" name="3DSound" checked>
|
||
<span class="toggle-slider"></span>
|
||
<span class="toggle-label">3D Sound</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="config-tab-panel" id="config-tab-extras">
|
||
<details class="config-section-card" open>
|
||
<summary class="config-card-header">Extensions</summary>
|
||
<div class="config-card-content">
|
||
<div class="toggle-group">
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-hd-textures" name="Texture Loader" data-not-ini="true"><span class="toggle-slider"></span><span class="toggle-label">HD Textures <span class="toggle-badge">+25MB</span></span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Enhance the game's visuals with high-definition textures.</span></span>
|
||
</div>
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-hd-music" name="HD Music" data-not-ini="true"><span class="toggle-slider"></span><span class="toggle-label">HD Music <span class="toggle-badge">+450MB</span></span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Improve the game's music with high-definition audio.</span></span>
|
||
</div>
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-widescreen-bgs" name="Widescreen Backgrounds" data-not-ini="true"><span class="toggle-slider"></span><span class="toggle-label">Widescreen Backgrounds <span class="toggle-badge">WIP</span></span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Adapts the game's background art for modern widescreen monitors, eliminating unwanted 3D backgrounds on the sides of the screen.</span></span>
|
||
</div>
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-outro" name="Outro FMV" data-not-ini="true"><span class="toggle-slider"></span><span class="toggle-label">Outro FMV</span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Plays the unused Outro animation upon exiting the game.</span></span>
|
||
</div>
|
||
<div class="toggle-switch">
|
||
<label><input type="checkbox" id="check-ending" name="Extended Bad Ending FMV" data-not-ini="true"><span class="toggle-slider"></span><span class="toggle-label">Extended Bad Ending FMV <span class="toggle-badge">+20MB</span></span></label>
|
||
<span class="tooltip-trigger">?<span class="tooltip-content">Plays the extended / "uncut" Bad Ending animation as found in beta versions of the game upon failing to catch the Brickster.</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
<details class="config-section-card">
|
||
<summary class="config-card-header">Offline Play</summary>
|
||
<div class="config-card-content">
|
||
<div class="offline-play-grid">
|
||
<div class="offline-play-text">
|
||
<p>Install the game for offline access. This will download all necessary files to your device (about 550MB).</p>
|
||
<p class="offline-note">Note: browsers enforce strict storage quotas, especially in private/incognito windows.</p>
|
||
</div>
|
||
<div class="offline-play-controls">
|
||
<img class="control-img" id="install-btn" src="install_off.webp" alt="Install Game" data-off="install_off.webp" data-on="install_on.webp" style="display: block;">
|
||
<img class="control-img" id="uninstall-btn" src="uninstall_off.webp" alt="Uninstall Game" data-off="uninstall_off.webp" data-on="uninstall_on.webp" style="display: none;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="config-toast" class="config-toast">Settings saved</div>
|
||
</div>
|
||
|
||
<div id="free-stuff-page" class="page-content">
|
||
<span class="page-back-button" role="button" aria-label="Go back to main menu">← Back</span>
|
||
<div class="page-inner-content">
|
||
<div class="resource-list">
|
||
<div class="quote-panel">
|
||
<div class="quote-panel-art">
|
||
<img src="congrats.webp" alt="LEGO Island characters celebrating">
|
||
</div>
|
||
<blockquote class="quote-panel-content">
|
||
<p>"In November of 2010, after all was said and done, I started getting emails from a few kids
|
||
and some adults telling me how cool they thought LEGO Island was. Some people actually still
|
||
play it. I was quite thrilled by these emails and actually quite honored."</p>
|
||
<footer>Wes Jenkins, Creative Director</footer>
|
||
</blockquote>
|
||
</div>
|
||
<a href="https://www.youtube.com/watch?v=bG55COe_f8I" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>The Making of LEGO Island: A Documentary</h3>
|
||
<p>An in-depth documentary by MattKC that explores the fascinating and chaotic development story
|
||
behind the classic game.</p>
|
||
</a>
|
||
<a href="https://www.youtube.com/watch?v=Poaxx9sMxjw" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>LEGO Island Radio 24/7</h3>
|
||
<p>Enjoy the iconic, high-quality soundtrack of LEGO Island anytime with this continuous live
|
||
stream, complete with the original DJ interludes.</p>
|
||
</a>
|
||
<a href="https://www.legoisland.org/" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>LEGO Island Wiki</h3>
|
||
<p>Your ultimate resource for all things LEGO Island. This fan-run wiki contains a wealth of
|
||
information, research, and details about the game.</p>
|
||
</a>
|
||
<a href="https://github.com/isledecomp/isle" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>LEGO Island Decompilation</h3>
|
||
<p>The core open-source project that reverse-engineered the original game, making this web port
|
||
and other mods possible. Dive into the source code here.</p>
|
||
</a>
|
||
<a href="https://github.com/isledecomp/isle-portable" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>LEGO Island, Portable Version</h3>
|
||
<p>A portable, cross-platform version of the decompilation project which serves as the direct
|
||
foundation for this web-based port.</p>
|
||
</a>
|
||
<a href="https://github.com/isledecomp/isle.pizza" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>isle.pizza Frontend</h3>
|
||
<p>The source code for this website! A custom-built frontend for the Emscripten version of the
|
||
portable decompilation project.</p>
|
||
</a>
|
||
<a href="https://github.com/isledecomp/LEGOIslandRebuilder" target="_blank"
|
||
rel="noopener noreferrer" class="resource-item">
|
||
<h3>LEGO Island Rebuilder</h3>
|
||
<p>A powerful launcher and tool for patching and modding the original 1997 PC version of LEGO
|
||
Island. Essential for play and modding.</p>
|
||
</a>
|
||
<a href="https://github.com/isledecomp/SIEdit" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>SIEdit</h3>
|
||
<p>A suite of tools developed by the decompilation team for viewing and editing the ".si" script
|
||
and resource files from the original game.</p>
|
||
</a>
|
||
<a href="https://www.legoisland.org/wiki/The_Making_of_LEGO_Island" target="_blank"
|
||
rel="noopener noreferrer" class="resource-item">
|
||
<h3>The Making of LEGO Island, a memoir by Wes Jenkins</h3>
|
||
<p>Read the fascinating, incomplete memoir from Creative Director Wes Jenkins, detailing the
|
||
development process and the team behind the game.</p>
|
||
</a>
|
||
<a href="/poster.pdf" target="_blank" rel="noopener noreferrer" class="resource-item">
|
||
<h3>LEGO Island: Free Poster</h3>
|
||
<p>Download a copy of the iconic poster that was originally included with the retail release of
|
||
the game.</p>
|
||
</a>
|
||
<a href="https://brickstobytes.org/games/lego-island" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>Development Materials Archive</h3>
|
||
<p>Explore a collection of development materials, concept art, and other historical assets from
|
||
the creation of LEGO Island.</p>
|
||
</a>
|
||
<a href="https://le717.github.io/LEGO-Island-VGF/legoisland/#interview" target="_blank"
|
||
rel="noopener noreferrer" class="resource-item">
|
||
<h3>Video Game Flashback: An Interview with Wes Jenkins</h3>
|
||
<p>A detailed interview with LEGO Island's Creative Director, Wes Jenkins, offering unique
|
||
insights into the game's production.</p>
|
||
</a>
|
||
<a href="https://www.youtube.com/watch?v=fodBG_QylVM" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>LEGO® Island - Behind the Scenes</h3>
|
||
<p>Watch a rare promotional video created during the game's development, showcasing its progress
|
||
and vision at the time.</p>
|
||
</a>
|
||
<a href="https://tcrf.net/LEGO_Island" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>The Cutting Room Floor</h3>
|
||
<p>Discover unused assets, hidden data, and other secrets left in the retail version of the
|
||
game. A fascinating look at what might have been.</p>
|
||
</a>
|
||
<a href="https://projectisland.org/music/" target="_blank" rel="noopener noreferrer"
|
||
class="resource-item">
|
||
<h3>Project Island High Quality Music</h3>
|
||
<p>A complete, high-quality re-digitization of the LEGO Island soundtrack, restored by the
|
||
game's main composer, Lorin Nelson.</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-disclaimer">
|
||
<p>LEGO® and LEGO Island™ are trademarks of The LEGO Group.</p>
|
||
<p>This is an unofficial fan project and is not affiliated with or endorsed by The LEGO Group.</p>
|
||
</div>
|
||
|
||
<div class="app-footer">
|
||
<p>Last updated: <span id="app-version">2026-01-04 23:57:38 UTC</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="canvas-wrapper">
|
||
<div id="loading-gif-overlay">
|
||
<img src="cdspin.gif" alt="Loading game...">
|
||
<div class="quote-block">
|
||
<p class="quote-text">"Whoops! You have to put the CD in your computer"</p>
|
||
<p class="quote-attribution">- The Infomaniac (1997)</p>
|
||
</div>
|
||
<div class="loading-info-text">
|
||
<p>"Hello! Hola! Aloha! How ya doin'? YO!" It's your pal, the Infomaniac, with a 2025 update! No need to
|
||
search for that CD case, my friend!</p>
|
||
<p>This amazing LEGO Island adventure is now streaming directly from... well, from a really, really big
|
||
digital box of bricks! Keep an eye on the status below!</p>
|
||
</div>
|
||
<div id="emscripten-status-message" class="status-message-bar">
|
||
Loading LEGO® Island... please wait! <code>0%</code>
|
||
</div>
|
||
</div>
|
||
<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
|
||
</div>
|
||
|
||
<div id="debug-ui"></div>
|
||
|
||
<script src="app.js" defer></script>
|
||
<script src="isle.js" defer></script>
|
||
</body>
|
||
|
||
</html>
|