Offset/width column counting

[martindusinberre]

Hi Henrik, sorry it's taken me a few days to get to this.

So, in terms of your columns, you need them always to add up to 12, counting from left to right. So if you have (for an imageComponent) an offset of 1 and a numberOfColumns at 4, you have a total of 5 and you need to fill another 7.

Thus, in terms of your Choice page: your imageComponent is fine, but your textComponent offsets 1 from the imageComponent to its left (because its renderOrder is 2, it will always react second to what the imageComponent is doing), which means that you now have: 1 (offset) 4 (image) 1 (offset). If your textComponent to the right of the second offset is only a width of 4 (as you have it), your right-side margin will be 2 (1+4+1+4 = 10). This isn't a bug, but on the page it will give the appearance of your work not being centred. So ideally you want the left-side and right-side margins to be the same (ie 1), so you should adjust by having a textComponent width of 5. (An alternative would be to have an offset of 2 for the textComponent, ie 1+4+2+4+1, but then this makes a visually unpleasing gap running down the middle of the page, in my opinion.) One advantage of having a numberOfColumns of 5 for a textComponent is that when you have a lot of text, e.g. in 1.0.0, you have a bit more space for that text and the page will be unbalanced.

This is true for your textComponent in your Exposure page and Exercise page, too.

Now to width of images and their render order on your Exposure pages. On the currently bugged 1.2.0, for example, there are several issues to note (one is editorial, the others technical):

• editorial: what do we gain from having a picture of Laura here? Won't it be distracting to the player, especially given (i) the length of text and (ii) the fact that you want them to focus on the details of the painting?
• Given that the point of the text is for the player to feel like they're seeing the painting in great detail, I would suggest a different design of the page: if you cut imageComponent1 and then have only one image (the current imageComponent2), you could then have the painting much bigger on the screen. You could do that by making the offset 1 and the numberOfColumns 10 (thus centring the image, ie 1+10+1). Make the renderOrder 1, so that the painting will be the first thing the player sees on the page.
• Then you have a choice for the textComponent: if you make it offset 1 and numberOfColumns 10, your text will be justified to the same margin as the image. But if you want to emphasize the size of the image, you could instead do offset 2 and numberOfColumns 8 for your textComponent (ie 2+8+2), which would centre the text but indent it both left and right below the image. (The render order is 2, so it appears below the image.) It's up to you. For one example, see 1.1.5 in the trailer.

Either way, what you currently have in 1.2.0 doesn't work visually because the offset for imageComponent2 is 4, which will make the image centred (4+4+4) but strangely too small for the page. Have a go at cutting the current imageComponent1 and restructuring the page. It might be that this helps the 'bug'...if and when we can get your story back up in the test environment (that's a separate issue).

Now to your Exercise pages. Here I'm going to focus on 1.2.1 as a starting point. Again, there's an editorial decision: isn't the image of Frederic going to distract the player from the four images you want him/her to focus on? If you go with this logic, then you could have the text at the top of the page:

• textComponent 1: numberOfColumns = 10, offset = 1, render = 1. Then, below that, you could have four images:
• imageComponent1 (currently2): numberOfColumns = 5, offset = 1, render = 2
• imageComponent2 (currently3): numberOfColumns = 5, offset = 0, render 3. (This will place the images directly next to each other, hopefully, without a gap between them: this would be the closest to the immersive visual experience you want the player to have, right? Similarly:)
• imageComponent3 (currently4): numberOfColumns = 5, offset = 1, render = 4
• imageComponent4 (currently5): numberOfColumns = 5, offset = 0, render = 5 (If it looks like a mess, we can adjust this) Then, directly below these two rows of images, you can have your textExercise (8, 2, 6), which means that the player is able to see the images above their hopefully without scrolling too much.

OK, so much as a first input on column counting and offsets.

[henokemp]

Absolutely no problem.

Now that you pointed it out, I can see that it's not correctly centered. Personally I didn't notice it before. I'll follow up on textComponents having a width of 5, I think this is a good idea.

The idea with having images of the characters and their surroundings is to basically create an UI for the player, something to orientate themselves. In my opinion - after seeing first the garden picture, the museum upfront, and Frederic and Velum - they player should be able to realize that these pictures are not part of the historical content of the game. Because of this I'm hesitant to break away from this concept for singular pages and would like to keep it for play-testing with the other DigiZeit members + other opinions.

I agree with making the painting bigger, good idea. At first I relied on the functionality to zoom in, but making it big from the start is more logical.

During last week I had the chance to try to game on the test-platform and it worked beyond 1.2.0. I think the issue was the textExercise, the related notebook-file and the character minimum. I removed the character minimum and made sure that everything was there. So I think we're close to a working version.

[interrogator]

This stuff really needs to end up in user documentation, as per #11