Hi guys,

It's me again - bright eyed and bushy tailed - and fairly clueless.

Is there a simple way to make a picture display in the quest game side by side with another picture at the same time?

So, I have a minigame/puzzle where the player must shift reactor fuel rods into their housing. The housing is the three-sided square closest to each rod.

Each rod is assigned a name based on its location. The left set of rods are in column A. The right, in column B. The rod on the top is 1A or 1B. The rod on the bottom is 5A or 5B.

To shift a rod, the player will need to type, "Shift 1A" etc. Except, there's a problem. Shifting a rod in the A column causes the adjacent rod in the B column to shift as well. Shifting a rod in the B column causes the rod directly below it in the same column to shift.

I originally imagined how I would code it making a series of 6 pictures displayed in succession to build the following image. There would be a title and directions picture, and then 1A and 1B would be displayed simultaneously, then 2A and 2B below it. Except, this would make the amount of coding I need to put in insane. I was wondering if I can separate this diagram so that each rod and its housing is displayed in a separate picture. But I still want rods in column A to be displayed next to their counterparts in column B.

The ending diagram would look like this when displayed in Quest, but the diagram is actually going to be a series of pictures all displayed at the same time to look like this...



So, I may not have described my issue as articulately as possible. If you don't understand my issue, here are some more pictures to display my problem.

This is what currently happens when I try to separate each rod into a separate image file, and then display it in quest...


This is what I want quest to display. Each rod is a seperate image file, but they are displayed side by side to the player...


If you understand my question, how would I go about doing this?

In 5.4 I believe you could just insert the necessary HTML to do that. Failing that, the only thing I could think of would be to stitch the images together into one image and display it.

Yes in 5.4 you should just be able to use this within some text:

{img:image1.png} {img:image2.png}

So you mean, throw that into an expression? And both pictures will show side by side? Simple as that?

Oh dang. I donwloaded 5.4 and immediately ran into several issues.

The opening song continues to play even when I stop the game. Also, timed scripts bug out on me bad, crashing the game. Finally, I used html code to change the size of text. I had it at a good size of 10. But somehow, size 10 is enormous in 5.4. I had to change the font size to 2. Also, several lines of text repeated for no reason in one playthrough, but then worked correctly in another playthrough.

I'm going to go back to 5.3 for a while.

I've been looking at this, and I'm wondering something.
In 5.4, how significant is the difference between this ...

... and this ...

I ask because when I was looking at WAKE I noticed the img tags were in a "message" script,
and I'm unclear whether that handles the html in the same way as the new "Text" script.

Asyranok wrote:The opening song continues to play even when I stop the game. Also, timed scripts bug out on me bad, crashing the game. Finally, I used html code to change the size of text. I had it at a good size of 10. But somehow, size 10 is enormous in 5.4. I had to change the font size to 2. Also, several lines of text repeated for no reason in one playthrough, but then worked correctly in another playthrough.

Music: I noticed the same thing when I test played WAKE. For me, it did stop eventually, but it took an oddly long time, like about 10 seconds or more. I should note that I had to replace the song with one I had in my "sample music" folder.
On the font size: from what I've found online, html font sizes only range from 1 to 7, with "standard" sized text being 3. I saw you had the game's title set to "20" so I tried changing it to "7" and it made no difference at all. Then I changed it to "6" and it was slightly smaller. I'm guessing it just defaults to 7 if you enter anything higher.
I didn't notice any timer problems or text repeating, but I only played the first room or so.

I believe in 5.3 and earlier, the font size you set was similar to setting a font point size in a word processor or similar thing. Now, the font size is being set using HTML which is completely different. An HTML font size of 3 is about your standard 12 point font. To get around that, you need to use CSS which uses a more familiar point or pixel sizing for fonts.

http://www.w3schools.com/tags/att_font_size.asp

Hey Alex, those images still appear one line after another with that code.

Are they supposed to appear side by side with that code?

Asyranok wrote:Hey Alex, those images still appear one line after another with that code.

Are they supposed to appear side by side with that code?

To be clear, are you working in 5.4, or did you get it going in 5.3 again? Because,I think the code he gave you is only for 5.4

I'm in 5.4.

Decided to stick with it.

Hmm, so you did this...

and you did NOT get this?


I was unable to get several img's to display at all (which is why I ended up using these ones, lol), and I'm not sure why.
The ones that worked lined right up, though.

That's strange. They refuse to line up side by side for me, no matter the size of the image.

What {img:filename} does in text processor is:

    return ("<img src=\"" + GetFileURL(filename) + "\" />")

You can include that HTML directly in your text:

  url1 = GetFileURL(filename1)
  url2 = GetFileURL(filename2)
  msg ("<img src=\"" + filename1 + "\" /><img src=\"" + filename2 + "\" />")

I didn't find any CSS code in playercore.css that would override the alignment you could include in the <img> tag.

For example, you could try using:

<img style="float:right" src=\"" + filename2 + "\" />

For the second picture and see what happens. Vaild values for float are "left", "right", "none" (default), and "inherit".

Interesting. I'll try that, thanks!

But why did it work right when I did it the way Alex said and not when Asyranok did? (If that was explained by your code there, it was way over my head ).

TG, it worked for me as well.

 msg ("{img:dice.gif} {img:dice2.gif}")

Strange. I just tried it again and it works for me now.

Hi guys, is there a way to achieve this by using if scripts for each image?

I know there is an IF in the text processor but it's limited. I mean a more complex "if" like six different scenarios for each image...

Thank you, Jay! I know it's gonna be you

No pressure...

Here is some code I've used in the past. I hope this isn't too complicated, but it works nicely...

The attached uses the trick of changing the CSS class for an element to vary its image. You set the images up, and then you can easily change what shows simply by removing the old class value and setting the new one.

It uses Quest timers, so it's a bit slow. When I use this code, I have a bit of JavaScript to do the class updating, so it's much faster. But this should give you the idea.

If you don't need the dynamic updating, just set the class when you print out the div. For example:

msg("<div class='DieHolder'><div class='Die1'></div><div class='Die4'></div></div>")

is all you need to print out two dice, a "1" and a "4" (as shown in the bottom static dice in the test game).

If you just want static images, here is a simpler version. Be sure you print out the css before you print out the divs. If you clear the screen, you have to print the css again (but if you don't, then once is enough, regardless of how many dice).

This needs to be in the same folder as the previous one, as it uses the same images.

And, of course, looking back, I feel a bit sheepish, as I've probably over-complicated the solution. If all you want is to print out two dice side by side that have pre-set values, then you can do this.

Name your die images Die1.gif (or png or jpg), Die2.gif, Die3.gif, Die4.gif, etc for all six sides.

Then if "leftvalue" and "rightvalue" are the two values you want, each being a value from 1 to 6, you can just do:

msg ("{img:Die" + leftvalue + ".gif} {img:Die" + rightvalue + ".gif}")

Awesome Jay!!! The dicetest2 is what i was looking for!

Jay, how to align a dice with 8 sides?, im trying, not getting it for some reason...

I'm not really sure what you're asking. First, do you mean 8-sided as in there are eight faces, or 8-sided as in each face is an octagon? (For comparison, a standard die has six faces, and each face has four sides.)

Also, how is not aligning? I can't get a good visual picture. Any chance of a sample?