Page 1 of 2

Changing board space images

PostPosted: Tue Jun 28, 2011 10:41 am
by mac
Can board space images be changed iBliss, like they can be in jBliss?

I made board image changes for my computer version, which are improved, but could be better, and I may create some better looking board space images than I already have.

After thinking about it, a really simple, quick fix to make the gameboard look more cohesive and classy, would be to have the board space images to be simple wood stained tiles, or maybe colored metal plates in the style of the nameplates. Possibly even having an "etched" in font to name the square. Just some thoughts for a quick and easy unification of the visual design, coming from a photographer and illustrator who has a keen eye for design. This would be classier and more visually unified than the mix of stock photos now used. While an image that more obviously represents the space might be preferred, it isn't a key to the gameplay, as the board space is identified when landed on. Photos may not be the way to go anyhow, even if they were more unified in look because they were shot specifically for this gameboard; rather than photos, an illustrated style of image might be best suited for the board spaces.

Attached is a quickie board change, using the stained squares idea. Not ideal (as cohesive illustrations might be) but design-wise, it is much more unified and classy.

Re: Changing board space images

PostPosted: Tue Jun 28, 2011 6:57 pm
by DaveBliss
Yes, board images can be changed. In fact almost every aspect of the design can be changed, including font, colors, locations and all the images. I suppose it's about time I wrote a skinning guide.

In the mean time for the adventurous here are links to the default skin (rename to .zip to open it), as well as the "base" skin that it sits on top of. Use the default skin as an example of how to make a skin, and use the "base" skin to see all the files that you can override. The idea is that if the file exists in your skin then Bliss uses it; otherwise it uses the file from the "base" skin. When you're done making your skin, zip it up and rename it to have a ".bsk" extension instead of a ".zip" extension. Then import it to your device via e-mail or iTunes, as described in the Help and on this forum.

I really like the stained look you created. I think line art would work well with it. When I have some time I may work up some illustrations to go with it, and switch the default skin to that look. In the mean time feel free to try it out yourself!

Re: Changing board space images

PostPosted: Tue Jun 28, 2011 9:19 pm
by mac
Very cool. Thanks!

Re: Changing board space images

PostPosted: Tue Jul 19, 2011 2:42 pm
by Miataman
I am a new user to the Bliss program and we love it. We have it on our Iphone as well as Our Ipad. I really like the classy look it has compared to the pc version. We have been trying to install some of the actions posted on the Forum, one imparticular is giving me fits. It's the Lingerie Boutique, I can install the action file but can't figure out how to make the game square show up. Any thoughts or detailed instruction would be Great.
I'm trying my hand at the action editor and I'm building a City Park for those outdoors adventurous types, and I would like to use a game square for it as well, so I hope we have that ability.

Re: Changing board space images

PostPosted: Tue Jul 19, 2011 3:13 pm
by DaveBliss
The iOS version of Bliss does support this. However the square image needs to be in PNG format. Here's how to do it:

First, convert the image to PNG format. On the PC you can do this by opening the image in Paint and choosing Save As > PNG Picture. On the Mac you can do this by opening the image in Preview and choosing File > Save As and selecting PNG in the Format drop down.

IMPORTANT: make sure that the image name is the same as before but with a .png extension instead of a .bmp extension. So for Lingerie Boutique the correct image name for the PNG image would be Lingerie Boutique.png.

Second, copy the PNG image to the Documents folder of your Bliss application. You can do this in iTunes. Make sure your device is connected to your computer, and then in iTunes click on your device. Select the Apps tab and scroll down to the bottom of Apps window. You'll see Bliss listed as one of the apps. Click on it to see a list of its files. Drag your PNG image into that list or click the button to browse for your PNG image.

The next time you play Bliss your new image should be available. Note that this hasn't been tested a lot, so if it doesn't work for you please let us know.

Re: Changing board space images

PostPosted: Tue Jul 19, 2011 5:57 pm
by Miataman
Thanks for the quick response I'll try it this evening and let you know.

Re: Changing board space images

PostPosted: Wed Jul 20, 2011 8:12 am
by Miataman
Thanks Dave for the info.
I was able to install the Lingerie Boutique image and it works just fine. Now I'm trying to install the City Park action I'm working on with its board image and it just shows the default heart. The pixel size is exactly the same of the boutique, 24 bit color with a .png extension. I've gone though the developement guide with no luck.
Is there something special you are supposed to do to link the board image to the action??

Re: Changing board space images

PostPosted: Wed Jul 20, 2011 10:37 am
by DaveBliss
As with the desktop version of Bliss, the name of the image needs to match the custom situation's name exactly, plus the .png extension. Case matters too. So if you named your custom situation "City Park", then make sure the image is named "City Park.png" including the capitalized letters.

Other than that, I don't have any good advice. If you figure out what the issue was then please post your solution here.

Re: Changing board space images

PostPosted: Thu Jul 21, 2011 7:00 pm
by Miataman
Thanks Dave, the problem was the capitalization. the Custom situation was City Park, while the pic was city park.png.
Works now, though. Just as an FYI the image is 136x136 px 24 bit color. Took the original image opened it in paint cropped it then resized it to 136x136 for the Ipad. And it looks awesome.

Thanks again

Re: Changing board space images

PostPosted: Thu Jul 21, 2011 7:32 pm
by DaveBliss
Excellent, I'm glad it worked for you!

Re: Changing board space images

PostPosted: Sun Oct 06, 2013 6:27 pm
by Len
Hi Dave - New user here. Can you re-post the ipad sample Skins? I'd like to take a crack at a skin.

Re: Changing board space images

PostPosted: Mon Oct 07, 2013 3:38 pm
by DaveBliss
Hi Len, I'm glad you're interested.

Here's the default skin, and here's the recent travel-themed skin. Both of them fall back to assets from the base skin as I described earlier.

iOS Bliss skins use Apple's naming convention for images, which can be a little odd. Here are some pointers:
  1. Images should be in PNG format, so they should have a .png extension.
  2. There are standard names for images which Bliss looks for, like board.png (but see below for modifications to the image name). You can find all the standard images in the base skin. In general use the same names and image sizes as the base skin if you plan to override them.
  3. If your skin doesn't include an image then the version from the base skin is used instead.
  4. Since most Apple devices nowadays have Retina displays you can specify a retina version of the image by making it twice as tall and twice as wide, and naming it something like board@2x.png. If the skin doesn't include a non-retina version then Bliss shrinks the retina version for non-retina devices. The default skins rely on this behavior by only including retina versions of their images to help save space.
  5. You can make device-specific versions of an image:
    • The name of an image for the iPhone would be something like board~iphone.png.
    • The name of an image for the iPad would be something like board~ipad.png.
    • The board background on the iPad also needs a landscape version named board-landscape~ipad.png.
    • The board background on the taller iPhone 5 should be named board-568h~iphone.png.
    • When combining the retina suffix with the device-specific suffix always put the retina suffix first, like board@2x~ipad.png.
    • For all these images note that the letter prefixing the "iphone" or "ipad" is a tilde ~, which is the top-left key of US keyboards. It is not a hyphen -.
    • Some images don't have a iPhone- or iPad-specific versions, like thermometer.png in the default skin. In this case the same image is used for both devices.

In addition to custom images, Bliss uses a styling system based on Cascading Style Sheets. If you're not familiar with Cascading Style Sheets you can find lots of introductory information on the web. Styles can be used to set the position and size of many elements like the player names, money displays, thermometers and board squares. In the base skin you'll find the default style sheet named default-style.css. Your skin can optionally have a file named style.css which overrides some or all of the default styles. It's largely thanks to the styling system that the travel-themed skin looks so different from the default skin.

Let me know if you have any questions.


Re: Changing board space images

PostPosted: Tue Oct 08, 2013 3:33 pm
by Len
Thanks Dave - looks straightforward enough.

One question - how do the CSS frame coordinates work? I figured out the sizing, but I can't seem to figure out how the coordinates translate to the position on the screen (I know I'm probably missing something basic).

Re: Changing board space images

PostPosted: Tue Oct 08, 2013 4:02 pm
by DaveBliss
Frame coordinates are in logical pixels from the top left of the device screen. "Logical pixels" means that on retina displays one logical pixel is two physical pixels wide, allowing you to use the same dimensions for both kinds of displays. You can alternately use a percent like 50%. You specify them in the strange order that regular CSS uses: top right bottom left.

So for example:
Code: Select all
#herName.iphone { frame: 20 315 70 195; }

says that for the herName item on the iPhone to use a frame whose top is 20 pixels down from the top of the screen, whose right side is 315 pixels over from the left side of the screen, whose bottom is 70 pixels down from the top of the screen, and whose left side is 195 pixels over from the left side of the screen.

If you're happy with the default size of the item then you could use center instead of frame:
Code: Select all
#herName.iphone { center: 255 45; }

puts an item in the same place as the previous example, assuming it has a default width and height of 120x50.

Re: Changing board space images

PostPosted: Tue Oct 08, 2013 8:38 pm
by Len
Thx Dave - that is what I was missing.

Ok - so using your example for #herName.iphone

I'd expect when I check the location of the Her Name graphic box in the default board@2x~iphone.png image the frame would be has follows:

top is 40 physical pixels down from the top of the screen
right side is 630 physical pixels over from the left side of the screen
bottom is 140 physical pixels down from the top of the screen
left side is 390 physical pixels over from the left side of the screen.

However when I check the image, the horizontal (left to right) positioning looks fine, but the vertical (top to bottom) positioning is 20 physical pixels further down from the top of the screen.

top is 60 physical pixels down from the top of the screen
bottom is 160 physical pixels down from the top of the screen

Is there some offset I need to factor in for the vertical positioning?