VibeGames.Ninja offers native arcade features like Level Editors and Replay Ghost Racing. If your game is built with AI, you can integrate these features using simple JSON messages and structure hooks. Here is how to configure your AI game build to become a first-class citizen in our retro arcade catalog.
1. Responsive Fullscreen Scaling
Your game runs inside an iframe wrapper. For the best mobile and desktop scaling, ensure your code scales the game board canvas to occupy 100% of the viewport width and height while maintaining aspect ratio:
function resizeGame() {
const container = document.body;
const gameRatio = 16 / 9;
let newWidth = container.clientWidth;
let newHeight = container.clientHeight;
if (newWidth / newHeight > gameRatio) {
newWidth = newHeight * gameRatio;
} else {
newHeight = newWidth / gameRatio;
}
canvas.style.width = newWidth + 'px';
canvas.style.height = newHeight + 'px';
}2. Emitting Level Data to the Platform
If you enable the 'Community Level Editor' checkbox on VibeGames, your game needs a way to send the custom level designed by the player back to the platform. Emit a window postMessage containing the JSON payload when the level is saved:
function saveCustomLevel(levelDataStructure) {
window.parent.postMessage({
source: "vibegames-sdk",
type: "VG_SAVE_CUSTOM_LEVEL",
payload: {
levelName: "My custom track",
data: levelDataStructure // JSON object
}
}, "*");
}3. Capturing Telemetry for Replay Ghosts
For time-trials, tracking player movement coordinates every 100ms constructs a replay ghost. Save the path array as a JSON file and emit it to the platform at the end of the race:
// Recording coordinates
let ghostRun = [];
setInterval(() => {
if (gameActive) {
ghostRun.push({ x: player.x, y: player.y, anim: player.currentAnim });
}
}, 100);
// Emitting data when crossing the finish line
function onRaceComplete(finalDurationMs) {
window.parent.postMessage({
source: "vibegames-sdk",
type: "VG_SUBMIT_GHOST_RUN",
payload: {
durationMs: finalDurationMs,
replayData: ghostRun
}
}, "*");
}
