Rough Sea Games

During my attempts to get into the deepest voodoo magic known to man, sometimes referred to as “webdesign”, I stumbled over another problem which took me some time to find the answer to. But since I recently played Professor Layton for the DS and immediately fell in love with it, I don’t mind wracking my brains about a riddle now and then… So my problem was to display a DIV element OVER an existing flash-object.

The first hits on google told me that this is impossible, since the flash-object has no z-index and hence the z-indexing for elements does not work here.

After some more google-usage, I found out that you can tell your flash-object to be “transparent”. You do this by adding the parameter “wmode” and giving it the value of “transparent”. You’ll also have to add wmode=”transparent” to your embed tag. And voila, it worked for me! I haven’t tested it on mac browsers, but as soon as I’ll have I’ll tell you.

So the whole code looks like this:

<div id="flash">
<object border="0" width="802" height="766" id="YOUR_ID_HERE">
<param name="movie" value="myswf.swf">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<embed src="myswf.swf" width="802" height="766" name="YOUR_ID_HERE" wmode="transparent">
</embed>
</object>
</div>


As you can see, I used a unique DIV that holds the flash-object. This DIV has a lower z-index than the DIV that is shown over the flash-object. As I told you, the z-indexing does not work in this case. I just added it for the sake of completeness.

Popularity: 3% [?]

As I have mentioned before I had to cut off the last ten minutes of video number 3. Here you can see the final part of the coloring process:

Rough Sea Games – Rocks The Boat – Color Video 03of03 from Chris Noeth on Vimeo.

Popularity: 13% [?]

Last week I read, in the German newspaper “Die Zeit”, a very interesting article about a newly discovered ancient civilization in Peru. This sensational find was possible due to the solo efforts of a tenacious archaeologist from the University of San Marcos in Lima, named Ruth Martha Shady Solís.

The so-called Caral Pyramids were found in the Supe (river) valley, where Ruth did her first investigations in 1994. Only the Sumerians in Mesopotamia built bigger and more glorious buildings. Caral is 5000 years old and hence the oldest known civilization in America so far. There are still more secrets to be revealed about this old and very complex society, which did not use any kind of weapons, as far as is yet known.  You can find some more information on Wikipedia.

This news has a small connection to our game. If you have been following our blog closely, you should gradually be getting an idea what our game might be about; please check our older blog posts about Copernicus and Piccard.

Popularity: 3% [?]

In my last post, I showed you a way to create rollover buttons that work in many different browsers without using JavaScript. I decided to use different images for different button states (like “normal”, “mouseover”) and use plain text for the button caption. This way, you have the advantage to use one and the same set of images for all buttons that have the same size. If you include your text in the images, you’ll need unique graphics for every button.

Unfortunately, there is one problem about plain text: alignment. Although it is quite easy to align text horizontally by using “text-alignment:center” in your CSS file, it was quite hard for me to figure out how to align the text vertically.

The first thing I tried was using “vertical-align:middle”. This might sound like the perfect solution,  but as a matter of fact, it is not. The vertical-align keyword controls the behaviour of adjacent elements of different size, like text with different font sizes. And the most important fact about vertical-align is: It is relative to the lineheight, NOT to the height of the parent element. Believe me, it took a long time for me to figure this out. And to understand it.

So what do you do if you want to vertically center a line of text, e.g. in a button? You might have guessed the answer: use the lineheight keyword. Since the vertical-align keyword defines the behaviour relative to the lineheight, you can combine the two keywords to get the desired effect.

In my case, I just set the lineheight of the text to the height of the button, and specified “vertical-align:middle”. And it works.

Check out this explanation to see how it works in detail.

Popularity: 2% [?]

Now that you are back from your ophthalmologist let’s add some ‘real’ colors to the ‘Rocks The Boat’ sketch… something which can finally be seen on your monitor without hurting your eyes.
If your eyes really are okay and fully healed after the last part (and of course you have the cojones to do so) take a look at the ‘Base Colors‘ we did last time because this is the starting point for the new video.
If you are new to this blog you can watch the first parts of the video series here:

‘Rocks The Boat – Sketch‘
‘Rocks The Boat – Base Colors‘
(We assume no responsibility whatsoever for any damage resulting from watching this!)

The new video (part 3 in the series) was too big to upload, so I had to cut off the last ten minutes. This last part I will show in my next post.
Don’t forget you can watch (and download!) this video in high definition over at ‘vimeo‘ !
Here is a low-def embedded version of part 3a:

Rough Sea Games – Rocks The Boat – Color Video 02of03 from Chris Noeth on Vimeo.

Popularity: 23% [?]

It is great how challenging things can get when you leave your standard C++ environment and start dealing with some web stuff, which is quite new to me.  There are plenty of things to learn!

I am sure that web design is a piece of cake to many people out there, but since I have just dived into baking myself, I do not have much experience. To help other bakers trying to get things right, I am going to share the things that were difficult for me to figure out.

I started  creating the landing page for our upcoming game and thought “well, some HTML here and a bit of CSS there, and we are ready to go”. This worked out quite well until I came to the part where I wanted a simple button to appear on the site that changed when the mouse hovers over it. Believe me, there are as many ways to do this as there are different browsers out there… Which is no coincidence at all. It is just that there is no general solution to this problem that works the same way in every browser!

The first thing I had to do was to focus on the browsers I want to support. At the moment, my choice is “IE, FireFox, Opera”. This should do for a start.

I tried different methods, sometimes including JavaScript. Personally, there is one thing I don’t like about JavaScript: It is often assumed to be unsafe. Depending on your security settings, you might always get asked by IE7 if you want to enable JavaScript on the website you are currently viewing or turn it off. I think this might frighten off some people which IMHO is bad.

So after trying different methods that only worked on two of the three browsers I wanted to support, I finally found the solution that I was satisfied with and that does not use JavaScript. Here is how it works:

You define your button as a cell of a table, known as “table data”. The tag is <td>.

The HTML code for the button is as easy as this:


<!-- mybutton -->
<table border="0" cellspacing="0" cellpadding="0" width="120px" height="24px">
<tr>
<td class="mybutton" width="100%" height="100%">
<a href="my hyperlink reference">Button Text</a>
</td>
</tr>
</table>
<!-- mybutton -->


The important thing is that you use the class “mybutton” for the table, so we are able to define the style for the table data, which is our button, in the CSS file.

So the CSS style is the interesting part. Check this out, it is quite self explanatory:


table.mybutton
{
width: 120px;
height: 24px;
margin: 0px;
padding: 0px;
}


This defines the size for the button. Remember, the table data sort of IS the button.


td.login-button a, td.login-button a:link
{
display:block;
width:100%;
height:100%;
margin:0px;
padding: 0px;
font-size:12px;
font-family:Verdana, Arial;
font-weight:normal;
color:#FFFFFF;
text-decoration:none;
text-align:center;
line-height:22px;
background-image:url(../images/button_normal.gif);
}


Nothing weird going on here. We just define the table data and the link inside it. We give it width and height 100% in order to make it just as big as we defined the table in the HTML file. The background-image contains the graphics for the button in its normal state and is also just as big as the table which in our case is 120 by 24 pixel.

Defining a AND a:link is necessary to make it work in Opera. Only defining a:link is not sufficient for that browser.

One thing to remember is:
Make sure to set all default values the way you want them.
For example, different browsers may have different default values for padding. If you don’t explicitly set them to 0, things might look different in different browsers. You can’t be sure every browser sets default values to 0. You must do this on your own.


td.login-button a:hover
{
color:#FFFFFF;
background-image:url(../images/button_hover.gif);
}

td.login-button a:visited
{
color:#FFFFFF;
}

I guess you already know what this is for. We simply set the image for the state of the link where the mouse hovers over it to the one with the “button-hover” graphics in it. We also make sure that the color always stays white in our button, no matter how normal links are treated.
The reason why I manipulate the Link (a) in here and not the table or table data itself is plain simple: IE does not support the “hover” feature for any other element than the <a> element. So :hover for table data won’t work. Don’t ask why, I don’t know.

I found the information for this on one of the most extensive HTML info websites I know, which is unfortunately not available in English at the moment but only in German and French: Selfhtml.

Thanks for reading and stay tuned. I am going to tell you how the vertical alignment of the button text works after my next visit to hell.

Popularity: 2% [?]

How can a small developer produce enough content to keep a massively multiplayer game interesting?

Fun is not a full time job

More and more browser games want to be World of Warcraft, which, in practice, usually means that they try to suck you into spending your whole day grinding. Our game is designed to be played for about fifteen minutes per day. Why? Mostly because we expect that our players will have lives outside the game, and we don’t want to ruin them. The side benefit is that we don’t need to produce content as quickly, since players can’t burn through everything in a single insomniac sitting.

Rough Sea needs you

The MMOG content problem arises because there are more players than developers. So why not allow players to make their own content? Everyone wins: creator players get in-game rewards and the pleasure of seeing their work in the game world; consumer players get more copious and varied content.  Of course, vetting submissions is a lot of work, but we may be able to use voting, etc., to get the players partially to supervise themselves! Many web sites (eBay, flickr, facebook) and computer games (Sims, Spore, Little Big Planet) are either founded on or enriched by “user created content”, but browser games haven’t twigged yet.

Use your words

The convential wisdom is that people hate having to read while playing a computer game — it’s a visual medium, like film — and that “reading” on the web consists of skipping as much text as possible. Our game, while primarily graphical, uses text to describe special events that occur in the course of play. Are we crazy? Possibly — and if playtesting shows that reading sucks, we’ll scrap it and redesign. But since players will only see a couple of text-based events per day (and since we hope to attract literate players, not twitch monsters), we hope that these will be seen as welcome variety, not as a chore.

And what are the advantages of text?

• it’s faster to write an atmospheric text than to create the same mood with art or sound. That means we can deliver more content.
• writing requires no special software or equipment, which makes it especially suited to user created content as described above.

Left to Chance

Computer games discovered early that a computer, given the right formulae, can create a huge, complex world much faster than a human can. The procedurally generated approach isn’t suited to text, nor to our style of graphics, but it is excellent for creating spaces for people to explore.

Popularity: 6% [?]

Hello folks,

I am sure you know that communication is one key for successful development or project work. Companies usually have a conference room, or you meet somebody in the hall or in the elevator that you need to talk to. But nowadays people work from home in different cities, countries or even continents. Therefore you need a virtual place to meet.

That’s why I am going to write a little about Murmur / Mumble for those who haven’t heard about it. Mumble is a voice over IP service, like Battlecom, Teamspeak or Ventrillo.  The advantages of Mumble are an excellent quality of speech,  database support, server & client support for all major operating systems, text chat, and encrypted traffic — all for free!

First of all, we should differentiate between the server (Murmur) and the client (Mumble). Murmur defines and handles all Mumble requests: a typical client / server system.
But enough of this chitchat. We have to set up a Murmur!

Installation of Murmur:

Therefore we should start with installing Murmur. Installing Murmur on Windows shouldn’t be a problem, but what about Linux? All common distributions offer a binary packet of Murmur that you can install via your package management tool like yast, yum install “packetname” , apt-get install “packetname”, etc.

I am going to describe another way and will use the
“Static Linux Server stable packet” which you can download here.

Download murmur-static_x86-X.XX.tar.bz2.

Now untar the compressed file.

tar xfvz murmur-static_x86-X.XX.tar.bz2

Go to the directory which has been untared or move it for example to /home/murmur. Of course you can also run Murmur in the current directory.

Now it is time to decide whether to use SQLite or a “real” database like MySQL. SQlite has the advantage of running with Murmur right out of the box. The disadvantage is command-line-based user management, like adding new users or administrators. With MySQL you could use phpMyadmin (if installed) to do the management, so future administrators wouldn’t need shell access to add new users.

So if you want to use SQLite, ignore the MySQL part of the murmur.ini

Create a database or use an existing database of MySQL!

Edit the murmur.ini with MySQL support:

database=putyourdatabasenameinhere

dbDriver=QMYSQL
dbUsername=database username
dbPassword=Ilove-securePasswords
dbHost=localhost #localhost or the ip of the remote database
dbPort=3306 #usually the default port of mysql is 3306
dbPrefix=murmur_ #prefix name of your tables within the database

### SQlite and MySQL has to edit the lines below ###

host= the ip or domain # if you want to bind the murmur server to a default address

port=64738 #port you use for your murmur server

serverpassword=NicePassword # password for non-registered users. Keep it empty for no password login

Save the murmur.ini and exit it.

Now set up a superuser with the following command:

./murmur.x86 -ini murmur.ini -supw

Under Windows, of course, use cmd and type murmur.exe instead of murmur.x86

Now the superuser is saved in the database.

That’s it!

Murmur is running. Now you can login as “superuser” with your Mumble client and configure the rooms with a helpful GUI. Click on “channel” and then “add”. Now you can add a channel/room. This shouldn’t be a problem.

Enjoy your virtual conference room!

Documentation is available at mumble.sourceforge.net

Popularity: 37% [?]