Unfinished Pixel RPG Platform using webGL via PIXI
By AstroMacGuffin dated Sun Jul 31 2022 16:30:21 GMT+0000 (Coordinated Universal Time) last updated Sun Aug 14 2022 21:33:23 GMT+0000 (Coordinated Universal Time) A few years ago, I launched into creating a pixel-based RPG from scratch by myself. Three months later, I had an interesting code base with a lot of functionality, but not a whole game platform by any stretch. Not even a demo. Just a toy that I had made myself.
If you're curious, bust out your favorite gamepad (or at least your favorite gamepad that connects to your computer), open the JavaScript console, and join me on a nostalgic trip to my first attempt at a game engine...
For security reasons I haven't enabled the load and save functionality, which would have allowed anyone and everyone to edit a JSON-formatted alternate map. I'm not ready to expose something like that to the public, but you can look at this little thing I made.
<style>
#toyboxTrigger {
background-color: #b0b0b0;
color: #202020;
padding: 4px;
font-size: 16pt;
font-weight: bold;
cursor: pointer;
}
</style>
<script>
$(document).ready( () => {
const testGame = document.querySelector('#toyboxGame');
if (!testGame) {
const game = document.createElement('div');
game.id = 'toyboxGame';
game.style.display = 'none';
game.style.width = '98vw';
game.style.height = '98vh';
game.style.position = 'fixed';
game.style.zIndex = '9999';
game.style.top = '.5vh';
game.style.left = '.5vw';
game.style.backgroundColor = 'black';
const frame = document.createElement('iframe');
frame.style.width = '100%';
frame.style.height = '100%';
frame.src = '/static/toybox/pixel-rpg-platform/index.html';
game.appendChild(frame);
x = document.createElement('span');
x.id = 'closeX';
x.style.position = 'fixed';
x.style.top = '1px';
x.style.right = '50px';
x.style.zIndex = '10000';
x.innerHTML = 'X';
game.appendChild(x);
x.addEventListener('click', (e) => {
$('#toyboxGame').hide();
});
if (vw >= 1024) {
document.querySelector('body').appendChild(game);
$('#toyboxGame').show();
}
}
// if (!document.getElementById('toyboxTrigger')) {
// const tt = document.createElement('span');
// tt.id = 'toyboxTrigger';
// tt.innerHTML = '🕹️ Demo it now (requires gamepad)';
// document.querySelector('#mainContent').appendChild(tt);
// }
$('#toyboxTrigger').click( () => {
$('#toyboxGame').show();
});
});
</script>
<div class="if-not-mobile"><span id="toyboxTrigger">🕹️ Demo it now! (requires gamepad)</span></div>
<p class="if-mobile">Unfortunately, it was never made ready for mobile devices. Check back here when you're on a PC with a gamepad.</p>
About the author of this piece, AstroMacGuffin: "I enjoy coding in Node.js and JavaScript as a hobby. I find Node.js to be a welcome escape, after a lifetime of code, with previous experience with PHP and JavaScript on the LAMP stack. I'm one of those people who spends way too much time herding electric sheep in front of a computer. You can find me on the JavaScript Mastery discord, where I'm a moderator, or on the Classic Shadowrun discord, where I'm the owner and founder. "
