I don't think I saw this in the documentation, but is there an easy way to add side images yet? Like the character appears to the left/right of the textbox, whatever floats your boat. It's a common thing for VNs and the current project I'm planning right now requires the MC to be a in side image.
I could probably brute-force my way to it, and I thought I could get away with setting the z value high enough but I just looked at the textbox code and it doesn't have a z index value. I could set it so that way there's a special textbox and all I do is show/hide the sprite manually, but that's a lot of work >_> If there isn't a way yet, would it be too much to ask for it in a future update? :C
#textbox #images #sideimages #WebstoryEngine
Hi @CheeryMoya!
I just realized that there really is no z attribute on image packs. Textboxes do know the z attribute, by the way.
I guess you could call that a bug, so I will fix it in the current release. Thanks for pointing that out!
Yes, the way it is right now you have to hide and show the side images manually. I too think it's a good idea to include that feature in the future in a sane way. What do you think would be the best approach for adding that to the language?
My take on it would be to associate an image pack with a character and show it whenever the character says something. Is that how you'd like it to be? I think I could write an extension that does something like that for the current version so that you wouldn't have to wait for the next release.
I've been trying to figure out how to go about it while making it easy for a developer, but I think your method would be easiest/sane. I hardly know XML (I'm doing this all by trial and error, I need to read an actual tutorial outside of the WS documentation for once) so I don't know what makes sense in the language :C
I would put the code in as something like:
<pre>
Code:
<character name="b" textbox="tb_side">
<displayname>Boy</displayname>
<imagepack name="side_boyexpress" x="0" y="0" z="0">
<image src="assets/images/boy_happy.png" name="happy" />
<image src="assets/images/boy_normal.png" name="bedday" />
<image src="assets/images/boy_sad.png" name="bednight" />
<!-- Rest of those expressions -->
</imagepack>
</character>
</pre>If that makes sense. And in the game, set it up so it works like:
<pre>
Code:
<show asset="tb_side"/>
<set asset="side_boyexpress" image="happy" />
<line s="b">Text</line>
</pre>Or something. Once again, thank you so much for developing this!
I'm afraid I overlooked the line in the code where the z attribute is evaluated in image packs... so, yes, z on image packs should actually work. Sorry for the confusion.
@CheeryMoya:
I just finished writing a side images extension! Please test it and report any errors.
You can download the extension here:
http://downloads.webstoryengine.org/exte...-images.js
After downloading, put the file in your WebStory directory.
To activate the extension, you need to change your index.html file:
<pre>
Code:
<!-- Replace this: -->
<script>
var game = new WSE.Game({ url: "game.xml" });
game.start();
</script>
<!-- with this: -->
<script src="side-images.js"></script>
<script>
var game = new WSE.Game({ url: "game.xml" });
WSE.extensions.sideImages.inject(game);
game.start();
</script>
</pre>
In your WebStory, you need to define an imagepack attribute on all the characters that have side images:
<pre>
Code:
<character name="l" imagepack="my_image_pack"></character>
</pre>
Hope that helps!
Sorry for dropping off the face of the planet for a week, I'm still here D: I'll be testing this soon and I'll tell you if there's any bugs.
Edit: Got it. It didn't work just putting the file into the general directory so I put it into the
js folder. Just so others know how to get this thing functioning without stumbling over themselves:
Step 1: Download the .js file.
Step 2: Place file into the
js folder next to the
WebStoryEngine.js, and not in the
libs folder.
Step 3: Open the
index.html and insert <pre>
Code:
<script src="js/side-images.js"></script>
<script>
var game = new WSE.Game({ url: "game.xml" });
WSE.extensions.sideImages.inject(game);
game.start();
</script>
</pre>
Step 4: Go to your game.xml and for all your speakers with sideimages, define them like this:
<pre>
Code:
<character name="s" textbox="tb_main" imagepack="speaker_sideimage"></character>
</pre> (You will want to raise the z value on the imagepack, I don't know how much by but I set it up to 10000 just to be sure it works)
Step 5: During the game, you make them show up by putting <pre>
Code:
<set asset="speaker_sideimage" image="expression" />
</pre> before their line of text.
I need to set up another textbox with more padding in it, but right now the image stays after their first line and doesn't disappear when another character talks. I can easily settle for hiding the image again but you'll want to see what's up before releasing the next engine build. Thanks again!
Edit by C7N: Please use
</pre></code> for writing code in the forums. Thanks!
Hi. I use version 2015.12.1.
I'm testing the side image extension but DIV and IMG opacity is set to 0 for the imagepack of side image .
So the side image is transparent. I can't find where to fix this.
Code:
élément {
opacity: 0;
position: absolute;
z-index: 10000;
left: 1097.58px;
top: 520.6px;
width: 209px;
height: 209px;
}
![[Image: 768943sideimageopacityissue.jpg]](http://img11.hostingpics.net/pics/768943sideimageopacityissue.jpg)
FYI: We solved this outside the forum. The problem was that the game.xml file was copied without also copying the index.html file, which was customized in this case. So if you have a similar problem after copying a game file, make sure that your HTML contains all the necessary stuff, like loading any needed extensions.