Overlapping images.

I have had problems trying to place one image over another. It just doesn't work for me. Could someone walk me through it or just I could copy and paste the most basic script? I think I know it is an advanced activity and I am still trying to make it work if I should know better or not.
I have tried the script and I don't know what I am missing.


I dunno, but this link might be helpful.

One Image On Top of Another
You can even superimpose one image over another if you feel brave enough. You need to put them both inside an HTML div (this is then the reference point that the images are positioned against), and give the images an absolute position. All that needs to go inside a single “msg” as Quest will add its own HTML, so in this example, a string, s, is used, with each bit added to it (we could do it in one line, but it would be very long).

 s = "<div style='position:fixed; left: 0px; bottom: 20px; width: 260 px; height: 670px;'>"
  s = s + "<img src='" + GetFileURL("gravestone.png") + "' style=\"position:absolute;top:0px;left:-200px;' />"
  s = s + "<img src='" + GetFileURL("celebrate.png") + "' style=\"position:absolute;' />"
  s = s + "</div>"
  msg (s)

Using this sort of positioning puts the images outside the normal flow of elements on the page, and getting the text to go around the images would be very difficult. I have dodged that by putting the images outside the text altogether.
What you can then do is have the images appear in response to how the game progresses.

https://docs.textadventures.co.uk/quest/images.html


Thanks. That's what I was looking for, but I had had some bad luck with it earlier, hopefully my fault. I will try it, again, now that I have this and am less confused, and let you know.


When I run that script, I get one PNG, the top one. I do not get two overlapping


I have uploaded a test game at
https://textadventures.co.uk/games/view/57zl3sqjdeoeuqwqok9r5q/test

It demonstrates that it is possible to overlap images, but since I do not have a programming background, most of my solutions are more like workarounds rather than proper coding.
That is to say, if you are interested and is interested in a grain of salt, you may try the following funny solution.

s = "<div style='position:fixed; left: 500px; bottom: 200px; width: 260 px; height: 670px;'>"
s = s + "<img src='" + GetFileURL("donald trump.png") + "' style=\"position:absolute;top:0px;left:-200px;' />"
s = s + "<img src='" + GetFileURL("celebrate.png") + "' style=\"position:absolute;' />"
s = s + "</div>"
msg (s)
s = "<div style='position:fixed; left: 500px; bottom: 200px; width: 260 px; height: 670px;'>"
s = s + "<img src='" + GetFileURL("joe biden.png") + "' style=\"position:absolute;top:0px;left:+200px;' />"
s = s + "<img src='" + GetFileURL("celebrate.png") + "' style=\"position:absolute;' />"
s = s + "</div>"
msg (s)

Basically it is the same coding as the documentation, first I change 1st line, left: 500px, bottom: 200px,
because I literally cannot see my picture from the original code, it was hidden at the left side screen instead.

Then I double clone the code, because you said you can only see the top image, I only change each of the top images from both codes, and viola, overlapping images is done, messy coding, but it works =D


More possible errors:

  1. You might have to use desktop client instead of phone app, I see you always talking about phone app in the forums.
  2. Depending on your pictures visibility, you might have to change the position in the coding so you can see your pictures.
  3. Depending on your pictures resolution, you might have to change the coding of the resolution.
  4. Trying to simplify the coding by removing the celebrate line, 4th line, stops the code from working.
  5. Trying to add all codes into one sentence stops the code from working unlike what the documentation said, the docs said the code can work in 1 line, but I might have made a mistake or two.
  6. Pictures are not showing might be because you did not input your picture.png name into the code or you have not insert your pictures into app yet.

I use my pc to make games, not my phone, however, people play phone games more than PC games, and there is a phone version of every quest game, just not always a working one, and no sound, and no paper.
I played your example. It works, but it doesn't show transparency or anything. I guess that doesn't matter. I will try your example at home and let you know if I have some success. Maybe, it is my game engine. Maybe, it has a bug. Probably not. I hope not. Maybe, because I had to type everything instead of copy and past, I aimed some of the quotation marks the wrong way.
I'll just copy and paste this, right now.
Thanks for helping me with this.


It works very nicely with transparencies added. I have it working as copy paste edited, so it must have been my quotation marks, which were directional, or missed or added spaces, things that are harder to read, that kept it from working. Thanks again, Daeun!


Log in to post a reply.

Support

Forums