Game interface stylesheet: yourgamename.css - Гісторыя версій

Shadowphiar на 09:03, 23 кастрычніка 2020

2020-10-23T09:03:13Z

← Папярэдн. версія		Версія ад 11:03, 23 кастрычніка 2020
Радок 44:		Радок 44:
	== Warning: using percentage in background-position ==		== Warning: using percentage in background-position ==

	In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this seems preferable because there is less dependence on the precise size of your images. Sadly however, this will cause issues on iPhone, on iPad, and on MacOS using Safari, because that browser calculates this offset in a slightly different way than Chrome or Firefox. (If the size of the div on screen, after any further scaling - which is done for you by the framework to fit games into small windows - is not a round integer number of pixels, then the offset of the image will be incorrect). To avoid this issue ~~always~~ specify the offsets in pixels.		In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this seems preferable because there is less dependence on the precise size of your images. Sadly however, this will cause issues on iPhone, on iPad, and on MacOS using Safari, because that browser calculates this offset in a slightly different way than Chrome or Firefox. (If the size of the div on screen, after any further scaling - which is done for you by the framework to fit games into small windows - is not a round integer number of pixels, then the offset of the image will be incorrect). To avoid this issue, either:
			* specify the background-position offsets in pixels.
			* choose the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.
			* define a <code>font-size</code> in your div and specify background-position in units of <code>em</code>.

	== Warning: using Z-index ==		== Warning: using Z-index ==

Sourisdudesert на 14:43, 11 верасня 2020

2020-09-11T14:43:36Z

← Папярэдн. версія		Версія ад 16:43, 11 верасня 2020
Радок 51:		Радок 51:

	About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)		About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)

			== Tip: how to make your cards looks beautiful :) ==

			This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.

			<pre>
			border-radius: 10px;
			border: 1px black solid;

			-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
			-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
			-o-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
			box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
			filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=30);
			</pre>

	== spectatorMode ==		== spectatorMode ==

Shadowphiar на 23:30, 13 жніўня 2020

2020-08-13T23:30:10Z

← Папярэдн. версія		Версія ад 01:30, 14 жніўня 2020
Радок 41:		Радок 41:

	Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.		Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

			== Warning: using percentage in background-position ==

			In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this seems preferable because there is less dependence on the precise size of your images. Sadly however, this will cause issues on iPhone, on iPad, and on MacOS using Safari, because that browser calculates this offset in a slightly different way than Chrome or Firefox. (If the size of the div on screen, after any further scaling - which is done for you by the framework to fit games into small windows - is not a round integer number of pixels, then the offset of the image will be incorrect). To avoid this issue always specify the offsets in pixels.

	== Warning: using Z-index ==		== Warning: using Z-index ==

Tutchek: Added navigation

2020-04-15T21:04:45Z

Added navigation

← Папярэдн. версія		Версія ад 23:04, 15 красавіка 2020
Радок 1:		Радок 1:
			{{Studio_Framework_Navigation}}

	This is the CSS stylesheet of your game User Interface.		This is the CSS stylesheet of your game User Interface.

Sourisdudesert на 16:33, 30 верасня 2013

2013-09-30T16:33:26Z

← Папярэдн. версія		Версія ад 18:33, 30 верасня 2013
Радок 16:		Радок 16:

	.white_token {		.white_token {
	background-image: url('~~../../~~img~~/emptygame~~/tokens.png');		background-image: url('img/tokens.png');
	background-position: 0px 0px;		background-position: 0px 0px;
	}		}
	.black_token {		.black_token {
	background-image: url('~~../../~~img~~/emptygame~~/tokens.png');		background-image: url('img/tokens.png');
	background-position: -20px 0px;		background-position: -20px 0px;
	}		}

Sourisdudesert на 13:14, 20 мая 2013

2013-05-20T13:14:58Z

← Папярэдн. версія		Версія ад 15:14, 20 мая 2013
Радок 39:		Радок 39:

	Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.		Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

			== Warning: using Z-index ==

			You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.

			About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)

	== spectatorMode ==		== spectatorMode ==

Sourisdudesert: /* spectatorMode */

2013-03-06T15:20:58Z

spectatorMode

← Папярэдн. версія		Версія ад 17:20, 6 сакавіка 2013
Радок 41:		Радок 41:

	== spectatorMode ==		== spectatorMode ==

			When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.

			This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:

			<pre>
			.spectatorMode #your_element_id {
			/* your special style */
			}
			</pre>

			The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:

			<pre>
			.spectatorMode #my_hand {
			display: none;
			}
			</pre>

Sourisdudesert на 15:17, 6 сакавіка 2013

2013-03-06T15:17:28Z

← Папярэдн. версія		Версія ад 17:17, 6 сакавіка 2013
Радок 39:		Радок 39:

	Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.		Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

			== spectatorMode ==

Sourisdudesert на 14:48, 4 лютага 2013

2013-02-04T14:48:42Z

← Папярэдн. версія		Версія ад 16:48, 4 лютага 2013
Радок 37:		Радок 37:

	Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.		Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.

			Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

Sourisdudesert: Created page with "This is the CSS stylesheet of your game User Interface. Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourga..."

2013-01-11T17:05:10Z

Created page with "This is the CSS stylesheet of your game User Interface. Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourga..."

Новая старонка

This is the CSS stylesheet of your game User Interface.

Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.

Usually, you are using CSS to:

1°) define the overall layout of your game
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

2°) create your CSS-sprites:
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.

Example:
<pre>
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

.white_token {
background-image: url('../../img/emptygame/tokens.png');
background-position: 0px 0px;
}
.black_token {
background-image: url('../../img/emptygame/tokens.png');
background-position: -20px 0px;
}
.token {
width: 20px;
height: 20px;
background-repeat: none;
}
</pre>

3°) ... anything else:

It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query).

This is why, very often, using CSS classes for the logic of your user interface allow you to do complex thing easily.

Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.