sigonasr2
/
hamster
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #20 from sigonasr2/emscripten-final-touches

Browse Source 
Emscripten final touches
sigonasr2, Sig, Sigo 3 months ago committed by GitHub
parent 3ff6153263 b6c7542d3a
commit bd808c76c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 180 additions and 27 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      CMakeLists.txt
  2. 192
      emscripten_shell.html
  3. BIN
      web-assets/background3.png
  4. BIN
      web-assets/button-big.png
  5. BIN
      web-assets/checkpoint.gif
  6. BIN
      web-assets/hamsterplanet.gif
  7. BIN
      web-assets/hamsterplanet.webm
  8. BIN
      web-assets/pge2_logo.png

15
CMakeLists.txt
Unescape View File

@ -278,6 +278,21 @@ if (EMSCRIPTEN)
COMMAND ${CMAKE_COMMAND} COMMAND ${CMAKE_COMMAND}
ARGS -E rename ${CMAKE_BINARY_DIR}/bin/${OutputExecutable}.html ${CMAKE_BINARY_DIR}/bin/index.html ARGS -E rename ${CMAKE_BINARY_DIR}/bin/${OutputExecutable}.html ${CMAKE_BINARY_DIR}/bin/index.html
) )
add_custom_command(
TARGET ${OutputExecutable}
POST_BUILD
COMMAND ${CMAKE_COMMAND}
ARGS -E make_directory ${CMAKE_BINARY_DIR}/bin/web-assets
)
add_custom_command(
TARGET ${OutputExecutable}
POST_BUILD
COMMAND ${CMAKE_COMMAND}
ARGS -E copy ${CMAKE_CURRENT_SOURCE_DIR}/web-assets/*.* ${CMAKE_BINARY_DIR}/bin/web-assets/
)
endif() # Emscripten endif() # Emscripten
###################################################################### ######################################################################

192
emscripten_shell.html
Unescape View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hamster</title> <title>Hamster Planet</title>
<link href="https://fonts.cdnfonts.com/css/press-start" rel="stylesheet">
<style> <style>
html, html,
body { body {
@ -14,7 +15,7 @@
} }
body { body {
font-family: arial; font-family: 'Press Start', sans-serif;
background: #222; background: #222;
color: #ded; color: #ded;
overflow: hidden; overflow: hidden;
@ -38,52 +39,189 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
text-align: center;
} }
#canvas { #canvas {
display: block; display: none;
border: 0px none; border: 0px none;
background-color: black; background-color: black;
margin: 0 auto; margin: 0 auto;
} }
#canvas:focus { #canvas:focus {
outline: none; outline: none;
} }
#start-screen {
display: none;
}
body.start #start-screen img {
display: block;
width: 100%;
height: auto;
}
#loading-screen {
display: none;
}
body.start #start-screen {
max-width: 30rem;
width: 100%;
display: block;
}
#start-screen video {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
}
body.start #pge-logo-container {
position: fixed;
left: 0;
right: 0;
bottom: 1rem;
width: 100%;
text-align: center;
}
body.start #pge-logo-container img {
display: inline;
max-width: 15rem;
width: 100%;
}
#start-screen button {
font-family: 'Press Start', sans-serif;
font-size: 1.2rem;
padding: 1.2rem;
margin: 1rem 0 0 0;
color: #ded;
text-shadow: .1rem .1rem .1rem #000;
cursor: pointer;
background-image: url(web-assets/button-big.png);
background-position: top left;
background-size: 100% 100%;
background-repeat: no-repeat;
border: none;
}
body.loading #loading-screen {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background-image: url(web-assets/background3.png);
background-repeat: repeat;
background-size: 3rem;
}
#loading-screen > div {
max-width: 30rem;
width: 100%;
}
#loading-screen > div img {
width: 100%;
height: auto;
}
#loading-screen > div span {
text-shadow: .2rem .1rem .4rem #000;
font-size: 2rem;
}
body.loaded #canvas {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
<div id="start-screen">
<video autoplay loop muted playsinline>
<source src="web-assets/hamsterplanet.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<p>
<img id="hamster-planet" src="web-assets/hamsterplanet.gif">
</p>
<p>
<button type="button" id="start-button">Load Game</button>
</p>
<div id="pge-logo-container">
<img id="pge-logo" src="web-assets/pge2_logo.png" alt="Powered by: olc::PixelGameEngine">
</div>
</div>
<div id="loading-screen">
<div>
<img src="web-assets/checkpoint.gif">
<span>Loading...</span>
</div>
</div>
</div> </div>
<script type='text/javascript'> <script type='text/javascript'>
var Module = {
print: (function () { var Module = {
return (...args) => { print: (function () {
var text = args.join(' '); return (...args) => {
console.log(text); console.log(args.join(' '));
};
})(),
canvas: (() => {
var canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
// application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
return canvas;
})(),
setStatus: (text) => {
},
totalDependencies: 0,
monitorRunDependencies: (left) => {
}
}; };
</script> })(),
canvas: (() => {
var canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
// application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
return canvas;
})(),
setStatus: (text) => {},
totalDependencies: 0,
monitorRunDependencies: (left) => {},
preRun: [
function()
{
document.body.classList.toggle("start", true);
Module["addRunDependency"]("click-to-start");
document.getElementById("start-button").addEventListener("click", (event) =>
{
document.body.classList.toggle("loading", true);
document.body.classList.toggle("start", false);
document.getElementById('canvas').focus();
setTimeout(() => Module["removeRunDependency"]("click-to-start"), 50);
});
},
],
onRuntimeInitialized: function()
{
document.body.classList.toggle("loading", false);
document.body.classList.toggle("loaded", true);
},
};
</script>
{{{ SCRIPT }}} {{{ SCRIPT }}}
</body> </body>
</html> </html>

BIN
web-assets/background3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 B

BIN
web-assets/button-big.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 785 B

BIN
web-assets/checkpoint.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
web-assets/hamsterplanet.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
web-assets/hamsterplanet.webm
View File

Binary file not shown.

BIN
web-assets/pge2_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

Write Preview
Loading…
Cancel
Save