Concept: Web RPG Background Music

[Ellie]

This webpage demonstrates how background music could work in a web RPG such as afar.ws.

It is created using iframes and javascript.

Note that while walking around, if the background music is new, it changes; otherwise it just carries on from "map" to "map".

Structure:
index.htm - holds the iframes
|- iframe: game
|- iframe: bgm
game.htm, woods.htm, woods2.htm, woods3.htm, city.htm - "maps"
game.mid, woods.mid, city.mid - midi files for background music

Opinions, thoughts, technical problems, bug reports?

Is this something I should develop further with means to incorporate into afar.ws or is it a bad idea?

In the context of such a game, it would of course be configurable to be turned off.


Thoughts for the future:
- use a flash app to loop the music instead of relying on whatever the user has as "default" music player. For me it's quicktime, and so does not loop automatically
- use php and user variables inside a game to allow the music to be turned on and off
- perhaps allow the user to select their own battle music as that will be prominently heard
- jukebox for people who want to pick songs on their own


http://afar.ws/musictest/

 

[Xilef]

Do you even need music?

How much real-time involvement does the player have in your game that they need music? Last I saw, Afar was a click-about-adventure.

But if you really want music, I'd look into implementing different methods, lots of people have different browsers, and not everyone has flash (Less and less in the future).

I think contextual music would be best, just play a tune depending on what page they're on, unless they have music turned off.

And for implementing music in a page, it's sometimes good to have multiple solutions running, I'd go flash primarily, if plugin not detected then decide between QT or HTML5 even, on one of my old sites I did for a company I has a flash loop happening with a backup simpler gif image if the plugin didn't load, the plugin didn't load for quite a few people either because they don't have flash or their device really can't support it.

For music specifically, in the past I would throw a QT into an iframe and you can make it loop, but that's not the most compatible way.

 

[Ellie]

The aim really for my game was to create as complete an RPG as possible within the context of a web page so it could be played anywhere and with little resources. Among this was the complex battle system and such and, well, sound and music.

Thanks for the suggestions. Yeah Flash would make it not work on iPods and other devices. I definately like the idea of a conditional statement splitting it depending on what you can run and doing what's best for your individual system.

 

[Xilef]

Is the iOS Safari even capable of playing sound in a web page?
I used to play your game on my DSi during boring lectures, the DSi browser cannot play any kind of sound format at all, does iOS Safari have anyway to play sound?

 

[gRaViJa]

html5 has an audio and autoplay tag.

Example: http://www.w3schools.com/html5/tryit.as ... tml5_audio

autoplay should let it play automatic (what else? :P)

 

[Ellie]

Hmm, I'm really going to have to read up on html5. Thanks for the link.

 

[Xilef]

Thing is, not every browser is HTML 5 compliant, it would be another year at the least before most of the web is HTML 5 (I'm looking at you internet explorer users), so don't go pure HTML 5, have a second option.

 

[Ellie]

Yeah that's my main problem with it. Also, I'm not sure what tags I've used that might now be lost. I'm guilty of having <marquee> and <center> all over the place and I believe they removed those in HTML5?

 

[Xilef]

<marquee> and <center> were never HTML compliant IIRC.
Weren't they internet explorer's naughty doing?
EDIT: <center> was dropped from standards after HTML 4, you can use it as I doubt you're going for HTML standards seeing as it's a crazy PHP game, but <marquee> is internet explorer's naughty doing.
Stop frolicking with IE, you naughty boy.

 

[Ellie]

I use them because they're there and also useful. They serve a purpose and do something, even if they are IE's naughty things.

Likewise with <center>.

I just think

<center>Object</center>

Is so much prettier and more readable than

<div style="margin-left: auto; margin-right: auto;">Object</div>

Or even what most HTML standards folk would have us do:

<style type="text/css">
.centered {
margin-left: auto;
margin-right: auto;
}
</style>
<div class="centered">Object</div>

Even then, if you were my HTML professor, you'd make me then split this into a HTML file and a CSS file. Ugh.


In short I'm all for HTML standards so long as they don't remove content that people have come to rely on and which are useful.

A HTML standards guy would make me remove <marquee> and instead animate it with javascript. The amount of code needed for that would be obscene when <marquee>, which has a wide number of attributes to make it useful, is, well, useful.

You can animate a load of things using <marquee>, and it's simple, even if for some reason it is "dirty":

Spoiler: Marquee Examples for basic animation

:box:


:smoke:

:devil:

Make things standard, yes. But don't remove features to do that.


Edit:

iframes are also removed so the whole system above wouldn't work.

 

[gRaViJa]

The more professional way to do those 2 things would be using an external css file, which would make your code more readable and i never heared of the <marquee> tag before, but it looks like you can do those things with javascript (of course, this requires javascript to be turned on).

 

[Ellie]

I guess that's merely a case of opinion then, because as I said, <center> is a lot more readable to me...

Marquee is a html block to animate things scrolling them from one side of the screen to the other.

It was made for things like news streams and such where a large amount of text needs to be displayed in a small space.

Yes, it can be done in javascript. But not as simply and it wouldn't be as readable.

It is such a powerful tool IMO; <marquee> has attributes for the speed, size (width and height), and direction of the objects inside it.

In terms of websites it may well be horrible done in the wrong places. In terms of a game though it is useful (even if I have only used it in one place so far - animating an airship).

Anyway sorry to rant but I simply disagree with you there and find putting things in their own files far, far less readable. Sometimes even unreadable if you can't find the right file and such.

I simply don't agree with them removing things such as <center> and <marquee> from the standards because it then makes old websites not html compliant - old websites which may not be updated for a long, long time. Amongst other things.