Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

How to make a frame around a web game?

A topic by max levine stuff created Oct 05, 2018 Views: 689 Replies: 3
Viewing posts 1 to 5

Say I have a web game with a 499x499 viewport. How could I put an image frame around it so it looks like the game is happening inside, say, an old computer monitor?

I need to learn HTML/CSS

:/


Thanks!

bump

Admin (1 edit)

A game engine that exports to HTML5 is going to create an html that runs the game. (This is the same index.html file that itch.io expects for HTML5 embeds.) You can edit that page to add the frame around your game's viewport. The easiest way might be to use background CSS  positioned correctly. Afterwards, if you upload to itch.io you'll need to make sure you set the dimensions of your game's viewport large enough.

Another approach would be to have your game render the frame itself. This might be easier for you if you're more familiar with your game engine.

I would take leafo's second approach because web pages will change. Especially, for different devices that are running different OS's. Perhaps, consider the legacy of things before the future of what might happen.  With his suggestion of the second approach you can encapsulate your game idea in it's own format. Therefore, preserving your original idea(s).  As long as HTML5 or what not, holds true. You'll preserve your idea....