Tips for Embedding Your Game to Your Website like Youtube Video

じ☆ve冰风

How to Embed Your Game like Youtube




Screenshot​

This tips was written when I was trying to put my translated game SRPG_Engine, online.

Hello all.
As we all know, RPG Maker MV is HTML5 based, therefore it can be played on any platform that supports HTML5. However, even though it can be played on any platform, it does not mean we can simply put the game on the website without adjusting it. Because it will give bad impression from your audience about your game.

Actually, you can just put it to dedicated game website, such as itch.io, etc. But how if you want to show the game as your portfolio? Or if you just made several progress and want to show to your audience or supporter how far your game progressed? Of course using your home page is the best place to present it.

In this thread I want to give you tips about how to embed your RPG Maker MV game into your personal site just like Youtube video.

This is the preparation that you should do:
1. Deploy your project by choosing a web platform. Use the encryption feature if you want to provide little protection for your game assets.
Spoiler: Screenshot

[/quote]

2. Check the deployment folder and make sure there are no files left. Use the Firefox browser to open your index.html for offline test whether your game and its features function perfectly if run inside web browser.
Spoiler: Screenshot[quote]

3. Upload your game to your personal server. If you don't have it yet, you can use the github.io page to host your game.

After all of above step is complete, the next step is how you embed the uploaded game, so that it can be played on your personal page just like you embed videos from Youtube. You can try to embed this sample game https://ryanbram.github.io/rpg_demoto your homepage for testing purpose.

First,
we need to add a mechanism to make your game don't run automatically when user open your homepage or your post. Because we don't want to load tons of game assets into user computer without user concern. They will getting mad to you if they find their browser suddenly unresponsive, or their internet connection become slower, or your game title BGM suddenly starts to play.

Go to your homepage. And enter the following code into your personal page post:
                Code:       
<iframe id="gameFrame" allowfullscreen="true" scrolling="no" height="312" width="555" sandbox="allow-same-origin allow-scripts" src=""></iframe><input onclick="gameFrame.src='https://ryanbram.github.io/rpg_demo'; gameFrame.focus();" type="button" value="Play Game" /> <input onclick="gameFrame.src='';" type="button" value="Stop" /> Press "F4" to go Fullscreen

Replace https://ryanbram.github.io/rpg_demo with the URL of your game. The screenshot on topmost of this post is how it will look in your personal page:

Second,
you need to ensure your game fit the browser window. Because, without plugin, MV cannot resize your game automatically to fit browser window without you manually press F3.
Here is the plugin: Download ...
,and this is the option that you should set for the plugin.
Spoiler: Screenshot

Actually you have to put this plugin since the first step before game deployment, but I put it here because I want to ensure even the beginner know basic things about web deployment. Okay, please repeat the 1st step until 3rd with this plugin already activated in your game project.

For another special tips:
Use this plugin, so can prepare only ogg musics, without need to including any m4a musics in your game, therefore your game size will become much more compact, this plugin also has feature to improve your game audio performance.


If you done with all of the steps above, you can view your page and see your game already there.

Good luck. (^_^)


本贴来自国际rpgmaker官方论坛作者:RyanBram处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/tips-for-embedding-your-game-to-your-website-like-youtube-video.110630/