BEEFING UP A GAME PAGE

Posts

Pages: 1
Hi guys!

As some in the Discord might know, I've been tinkering with the CSS to my game page to give it more pizazz.

I should note I am a weirdo and my design ideal was 1990s geocities so the only thing I lack is JavaScript snow. Deal with it. Anyway.

I have currently managed to:

- Create two new side bars
- Add box art in these
- Add LIVE HIGH SCORES ON RMN in the side bar
- Make everything resize and zoom around depending on screen size, using viewport widths, @media and min-widths
- Change the colour scheme of the game page itself



I am wondering where to go next. Obviously, the actual content of the game page is important! I need to make it more graphical, perhaps neaten up the text, and be less text heavy to start with.

With some aspects now relegatable to my side bars I could also clean up the page, as long as I don't go too far and start messing with key elements - I am wary of being RMN legal, I know that the Powers That Be do not want anything changed with the top menu, logos, etc. It still needs to Be RMN. Indeed my side bars may be a push too far but we will see.

I can use my server to generate stats and things for the game and place them in key points. Perhaps things like number of players today. Basically I am doing this by generating PNG images on my server and using them in IMG tags or in backgrounds using CSS rules (none of this actually edits the site; it's just images).

Here's my game page: https://rpgmaker.net/games/12302/

Obviously none of this is an excuse for poor gameplay or a weak game description itself; the game page is just a little project to keep my time at the moment (going through a rough patch right now).

Anyway. I'd love to hear what you think to my spruced up game page and see where you think I can go with this to push it further.

If you would like to use my high scores system eventually in your own game I'd also love to know. It is not public yet, and it is probably terribly coded, but I'd still like to work with you in the distant future.

This image is live:



Disclaimer: though RMN went down after I added my side bars, I am not the reason the site went down. Nothing I have done is any more than adding a CSS rule, which are processed client side and only from MY game page. It's a coincidence. Honest.
I dunno if it's worth doing but:


little sequence lighting for the arcade experience
Nice.

I've also managed to implement browser play, by a cheeky image "button", and have some CSS that makes that button flash on hover:

#game_description div:first-of-type a:first-of-type div:first-of-type img:hover {

display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url('hoverimage.png') no-repeat;
width: 612px; /* Width of new image */
height: 459px; /* Height of new image */
padding-left: 612px; /* Equal to width of new image */
margin-bottom: 10px;
}


Basically makes the first image in the first div in the first <a> tag change image on hover. By linking this to the itch game itself I have created the impression that you're playing right there within RMN.

Also spaced out the text with line-height, changed some headers and font sizes, and replaced the top banner:



Animation would be cool.

Also need to improve the download button as I changed the font and spacing by mistake (by applying it to #game_frame).

Wanna graphicalise this sub-menu too:

Hey so this is really cool, or really tacky, depending on your mindset.

Using just three PNGs and a CSS rule - no videos, gifs, webms or other animation - I have created an animated background for my next game, Frogge.

https://rpgmaker.net/games/12323/

The CSS I have used looks like this:

#body {
background: url('IMG1.png'), url('IMG2.png'), url('IMG3.png');
background-size: stretch, stretch, stretch;
background-attachment: fixed, fixed, fixed;
background-position: top-left;
animation: marquee 10s infinite linear;
}

@keyframes marquee {
0% {
background-position: 0, -1632px, 0; /* 2x image width */
}

100% {
background-position: -1632px, 0, 0;
}
}
is there no way to maybe put the numbers left alignment so that they're nice and even and not all over the leaderboard? idk, it's the only nitpick I have

look slick otherwise
Pages: 1