Adventure Creator original thread

[Wolfschadowe]

I wonder if my post was a little misunderstood. The example site I linked shows where all the hot-spots on the image are, but that's coincidental and I would prefer to have that feature removed for use in a game like BEW. Mainly what I was referring to was the hybrid Mouse/Touch functionality of the image map that would allow a game like BEW, or the Keeley games that have hit targets in the images along with pop-up descriptions on mouse hover to be played on an iPad or Android tablet where the mouse hover feature doesn't work.

The Tab functionality to find image hotspots does seem to work on most browsers currently. Sometimes it's just a little hard to see the dotted outline of the hit target.

Wolfschadowe

[tlaero]

I spent some time with that example, and, unfortunately, it's a pretty radical change from how AC works. My hit targets are image maps and that example uses div sections. Unfortunately, the tricks they're using only work in Div sections. If someone better with HTML than I am can teach me any easy way to change from image maps to div sections, I'd be happy to listen and learn, though.

Tlaero

[Wolfschadowe]

I don't know if these are helpful or not, but here are a couple other items I found on the subject as I was poking around earlier today.. At least one also talks about using div tags in more detail. Maybe one will spark a eureka? It's mostly greek to me though.

https://workshop.avatarnewyork.com/post/how-to-handle-touch-events-on-image-maps/

http://padilicious.com/code/touchevents/

http://stackoverflow.com/questions/18754475/are-touch-events-in-html-image-maps-supported-in-ios-mobile-safari

Wolfschadowe

[kexter]

If someone better with HTML than I am can teach me any easy way to change from image maps to div sections, I'd be happy to listen and learn, though.

I'm exceptionally bad at teaching so instead I meshed together the demo Wolfschadowe posted earlier with the AC Example game. Maybe it will help, I tried to change as little as possible. AddArea() in _functions.js and _style.css is the gist of it.
Here is a link to the modified version of the Example game and Tutorial 4 from the latest AC: http://www.mediafire.com/download/1jtx1e7bo8l78yu/AC-ResponsiveImageMap.zip

[tlaero]

Thank you, Kexter. I'll look at that later on tonight.

Tlaero

[SoulMate]

@tlaero
It's not that hard to replace image maps with divs. I've done it in WBA.
The essential you have to do is create a div (id=wrapper) around your image, which has the same size as the image.
Within that div (id=wrapper) you have to place another div, next to the <img> tag (id=imagemaps)

give the #wrapper the css style: { position: relative; } (makes all the child divs calculated relative to this div)
give the #imagemaps the css style: { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } (this way the div acts as a layer on top of the image)
Now you can place targets (divs) in the #imagemaps with javascript and set the inline css style { position: absolute; left: [[x]]; top: [[y]]; width: [[w]]; height: [[h]]; } where x,y,w,h are calculated values (which can be converted from the image maps values)

If you want to have them responsive so the image could scale on all devices, its getting a littlebit harder. Ill can explain it if you want to.
Divs only work for rectangle shapes
Round/oval shapes are also possible on 'modern' browsers (>=ie8) with css border-radius: 50%; (which makes the corners round to 50% of the width and height, which makes it oval). Conversion from image map values is somewhat harder.
Poly shapes are only possible with the canvas 2D element (also for modern browsers)

If you need more information, i'm willing to help, test, give feedback :-)

[tlaero]

Thank you, SoulMate. It's going to be a few days before I look at this (got busy all of a sudden), but I'll look at Kexter's example and your explanation soon.

Tlaero

[tlaero]

Kexter, I looked at your changes briefly tonight and they look quite doable. Thank you for the concrete examples. I'm really slammed this week, but I'll definitely look into incorporating this in the future. It'll be cool to support touch devices.

SoulMate, thank you for the explanation. That helps as well.

Tlaero

[simarimas1]

Ok, I know I am a total idiot, and this will be very simple to answer. I don't know javascript at all.

I want to have multiple characters having variables. So how do I make the different variables effect each character differently.

So basically if you talk to Amanda, she gets happy, but Sonia gets sad, and Carol gets angry.

Thanks!

Sim

[Wolfschadowe]

Hi simarimas

There are several ways to do this. The way I do it is:

In game.js, add or change variables in gameVars:

Code: Select all

var gameVars = ["amandahappy","amandaangry","soniahappy","soniaangry","carolhappy","carolangry"]

This sets the variables you want to use for your game. Name them whatever you want. Shorter the better.

Then to do what you mentioned you could use the following three commands:

Code: Select all

varPlus1('amandahappy');
varMinus1('soniahappy');
varPlus1('carolangry');

I personally would write a handful of reusable functions for these types of activities so I could go directly from AC. An example:

Code: Select all

function varPlusPlusMinus(first,second,third)
{
varPlus1(first);
varPlus1(second);
varMinus1(third);
)

Then in AC, I would just use varPlusPlusMinus('amandahappy','carolangry','soniahappy') This would add one to amandahappy (happier) and also to carolangry (angrier) and subtract one from soniahappy (sadder)

Clear as mud?

Hope that helps
Wolfschadowe.

[simarimas1]

AWESOME!

Exactly what I needed. I figured it was something along those lines, but wanted to be sure.

Thank you very much Wolfschadowe.

[simarimas1]

Hmm, I am still doing something wrong here. I think I followed what you wrote, but I am definitely doing something wrong.

So in AC I wrote in the onclick: varPlus1 ('amandaangry'); varPlus1 ('bridgetteangry') This results in Amanda getting one angry, but not bridgette.

I then tried varPlus1 ('amandaangry', 'bridgetteangry') This did not seem to work either.

So I am sure I missed something here.

Thanks again.

[Super]

The onClick thing can only do one function at a time. So

Code: Select all

varPlus1 ('amandaangry'); varPlus1 ('bridgetteangry')

Is not two functions, it is one. One that doesn't exist. Hence the error.

When you do the following:

Code: Select all

varPlus1 ('amandaangry', 'bridgetteangry')

Well, first off, ( *THING1*, *THING2*) means you raise THING 1 UP THING 2. What this means is that

varPlus1 ('amandaangry');

is the same as

varPlus ('amandaangry', 1);

Thus, if you want to increase amandaangry by, say, 5, you do the following:

varPlus ('amandaangry', 5);

As for what you are trying to do. In order to raise two seperate variables at once, you need to create a new function. Observe:

Code: Select all

function varPlusPlus1(first, second)
{
   varPlus1(first);
   varPlus1(second);
}

This is a universal function for adding plus 1 to two separate variables. So, it can also be used to add 1 to amandagappy and bridgettehappy

Copy that into game.js, and have the following in onclick:

varPlusPlus1('amandaangry', 'bridgetteangry');

Or whatever the variables are. That should work. And hopefully this makes sense, I am by no means an expert.

[simarimas1]

Ah, hah! I believe I understand now. I didn't realize I needed to add the function in the js. I will give this a try.

Thank you very much Superawesomemans.

I am very thankful for eveyones help. This is a great community, and I truly do appreciate it.

[simarimas1]

Ok, that worked perfectly!

One last question,

Is there a way to go to another htm page upon clicking on the speech box, where I have the onclick?

So when someone click on a speech area, it gives an angry/happy variable, and also advances to the next page? Like clicking on an area does?

Thanks again.