Name: Создание игры-виджета для Windows 7 Sidebar
Item: Создание игры-виджета для Windows 7 Sidebar
Author: Engeltybreele

Среда, 24.04.2024, 15:54

Приветствую Вас Гость | RSS

Главная | Регистрация | Вход

Навигация

Категории

C++,C#,C [19]

Уроки по средам разработки приложений с использованием C,C++,C#, а также .Net, DirectX, OpenGL и других

Delphi [14]

Уроки работы в среде программирования Delphi

Basic [13]

Уроки разработки приложений в среде Basic

DirectX [8]

Уроки по работе с DirectX, включая Direct3D и другие инструменты

Web [7]

Уроки по "Веб-программированию"

JavaScript [12]

Уроки по кодингу в Java и JavaScript

XNA [9]

Статьи и уроки программирование в среде XNA C++&C#

Профиль

Статистика
	Онлайн всего: 1 Гостей: 1 Пользователей: 0

Главная » Статьи » Программирование » C++,C#,C

Создание игры-виджета для Windows 7 Sidebar

Создание игры для Windows 7 Sidebar

Виджет - элемент интерфейса, а гаджет - устройство.


В этой статье я постараюсь рассказать о том, что такое виджет Windows и как можно сделать несложную игру для него. Виджеты в Windows появились на Vista версии. На Windows 7 они представлены в улучшенном варианте. Разрабатывать их можно как в Visual Studio, так и простом блокноте. Виджеты поддерживают Web-технологии, это значит, что Silverlight код можно без проблем адаптировать для Windows Sidebar.

Документация Windows Sidebar (на англ.): http://msdn.microsoft.com/en-us/library/aa965850%28v=VS.85%29.aspx

Windows Sidebar (боковая панель) – область рабочего стола в Windows, на которой уже принято устанавливать различные виджеты, как то часы, калькуляторы, показатель нагрузки на процессор и многое другое. Особенно популярны стали виджеты для интернет-служб, например Twitter, Facebook, Вконтакте, Youtube и других.

Возможности

Виджеты могут: поигрывать медиа содержимое, начиная от изображений и музыки, и до передовых технологий трансляции через интернет. Крому совместимости с web-технологиями, виджеты способны взаимодействовать с системой почти на одном уровне с приложениями. О доступе виджета к системе можно узнать здесь: http://msdn.microsoft.com/en-us/library/ff486368%28v=VS.85%29.aspx

Silverlight

В плане разработки виджета у Silverlight очевидное преимущество, в плане полной интеграции с ОС, малыми потребностями (по сравнению с флеш, например в проигрывании видео). К тому же, уже есть готовый шаблоны для разработки Silverlight-виджетов на Windows: http://visualstudiogallery.msdn.microsoft.com/bf347eb6-99bd-4c99-89d0-6ca3fe1eb54e

Статья о разработке виджета на Silverlight (англ.): http://blogs.msdn.com/b/charles_sterling/archive/2007/05/14/writing-a-windows-sidebar-gadget-in-silverlight-dead-simple.aspx

Теперь к практике.

В целом разработка виджета очень схожа с созданием web-приложения. Можно применить Silverlight, JavaScript, Flash, в общем все что душа пожелает.

Но в этой статье игру будем делать на JScript используя CSS.

Все виджеты состоят из обязательных файлов, без которых система их просто откажется запускать:

Manifest — файл с описанием виджета. Расскажу лишь о главных параметрах.

- <name> - название виджета.
- autoScaleDPI – параметр введен начиная с Windows 7, принимает true или false. Он говорит системе, поддерживает ли виджет масштабирование. Если да.
- <namespace> - параметр, который просто должен быть. Как сказано в документации, просто на будущее.
- <base> - информация о файле с содержимым виджета.
Вот другие параметры:

HTML – файл с описанием вида виджета. В этом файле указывается не только его внешний вид, но и вкладываются все скрипты, компоненты и многое другое.


Tutorial

Виджеты пользователя в: %USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets.

Виджеты всех пользователей здесь: %SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets.

!!! ВАЖНО: Файл все файлы должны быть в UTF-8 !!!


Документация рекомендует называть директорию проекта по принципу название_проекта.gadget. Так и сделаем.

Создаем директорию User\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Noughts And Crosses.gadget.

Теперь нужно создать файл Gadget.xml. Впишем информацию о виджете:

<gadget>
<name>Крестики-нолики</name>
<version>1.0.0.0</version>
<author name="XNADev Community">
<info url="xnadev.ru" />
<logo src="Images/icon.png" />
</author>

<copyright>© XNADev Community</copyright>
<description>Игра в крестики-нолики</description>
<icons>
<icon height="64" width="64" src="Images/icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="main.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
<defaultImage src="Images/icon.png" />
</host>
</hosts>
</gadget>

Создаем файл main.html. Вписываем:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="MSThemeCompatible" CONTENT="yes">
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<script src="Scripts/Main.js" type="text/javascript" language="javascript"></script>
<link href="Styles/Styles.css" type="text/css" rel="stylesheet">
<title>Крестики-нолики</title>
</head>

<body onload="Init();" onmouseup="onMouseUp();">
<g:background id="puzzleBg" src="url(Images/background.png)" style="position:absolute; z-index:-1;"/>

<span id="gadgetContent"></span>

</body>
</html>
Если вы знакомы с JavaScript (Jscript, VBScript), то проблем быть не должно. Но есть также и отличия в программировании виджета от программирования web сайта. Например есть уникальные для виджетов свойства, которые прописываются через приставку g: <g:background id="puzzleBg" src="url(Images/background.png)" style="position:absolute; z-index:-1;"/>.

<meta http-equiv="MSThemeCompatible" CONTENT="yes"> - важный и уникальный параметр для Windows. Он говорит системе, что содержимое является совместимым с темой Windows. Без него виджет просто не будет выполняться, хотя установить его можно.

<span id="gadgetContent"></span> - объект DOM. По идее именно в нем и будет находится вся игровая графика.
Для удобства все компоненты игры лучше распределить по директориями. Создаем папки:
Images, Styles, Scripts.
Создаем файл CSS Styles\Styles.css и вписываем:

body
{
margin: 0;
width: 96px;
height: 96px;
font-family: verdana;
font-weight: bold;
font-size: 20px;
}
#gadgetContent
{
margin-top: 20px;
color: Black;
width: 96px;
height: 96px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}

width и height – размеры содержимого. Остальные параметры можно пропустить.
Делаем файл со скриптом Main.js и заполняем:

// Initialize the gadget.

//Game field Width
var gfxWidth = 96;

//Game field Height
var gfxHeight = 96;

//Game Field
var gameField;

//Tile Images
var tiles = new Array(9);

//Хранит значение тайла:
//1 - X
//2 - 0
var tilesValue = new Array(9);

//Кто победил:
//0 - Игра идет
//1 - Игрок
//2 - AI
//3 - Ничья
var winner = 0;

function Init() {
//Получае GameField
gameField = document.getElementById("gadgetContent");

//Заполняем картинки
resetTiles();
}

// использование Math.round() даст неравномерное распределение!
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomArbitary(min, max) {
return Math.random() * (max - min) + min;
}

function onMouseUp() {

checkTile();
}

//Вычисляет и проверяет тайл, который кликнул пользователь, затем
function checkTile() {

if (winner === 0)
{
var tileX = event.clientX / 32;

var tileY = event.clientY / 32;

var count = 0;

for(var x = 0; x < 3;)
{

for(var y = 0; y < 3;)
{

var offsetX = x * 32;

var maxOffsetX = offsetX + 32;

var offsetY = y * 32;

var maxOffsetY = offsetY + 32;

if (event.clientX > offsetX && event.clientX < maxOffsetX)
{
if (event.clientY > offsetY && event.clientY < maxOffsetY)
{
//Нашли кликнутый тайл

if (tilesValue[count] === 0)
{
tilesValue[count] = 1;

tiles[count].src = "Images/cross.png";

checkWinner();

AIMove();
}

break;
}
}

count++;

y++;
}

x++;
}

//document.getElementById("gadgetContent").innerHTML = "X: " + tileX + " Y: " + tileY;
}
}

//Ход AI
function AIMove() {

if (winner === 0)
{
var i = getRandomInt(1, 4);

var count = 0;

var triesCount = 0;

var maxTries = 100;

while(triesCount < maxTries)
{

i = getRandomInt(1, 8);

if (tilesValue[i] === 0)
{

tilesValue[i] = 2;

tiles[i].src = "Images/zero.png";

break;
}

triesCount++;
}

checkWinner();

//document.getElementById("gadgetContent").innerHTML = "RND: " + i;
}
}

//Проверяет, вдруг кто выиграл
function checkWinner() {

for(var side = 0; side < 3;)
{
if (tilesValue[0] === side)
{
//Левый столбик
if (tilesValue[1] === side && tilesValue[2] === side)
{
winner = side;

break;
}
}

if (tilesValue[3] === side)
{
//Центральный столбик
if (tilesValue[4] === side && tilesValue[5] === side)
{
winner = side;

break;
}
}

if (tilesValue[6] === side)
{
//Правый столбик
if (tilesValue[7] === side && tilesValue[8] === side)
{
winner = side;

break;
}
}

if (tilesValue[0] === side)
{
//По диагонали
if (tilesValue[4] === side && tilesValue[8] === side)
{
winner = side;

break;
}
}

if (tilesValue[0] === side)
{
//Верхняя строка
if (tilesValue[3] === side && tilesValue[6] === side)
{
winner = side;

break;
}
}

if (tilesValue[1] === side)
{
//Средняя строка
if (tilesValue[4] === side && tilesValue[7] === side)
{
winner = side;

break;
}
}

if (tilesValue[2] === side)
{
//Нижняя строка
if (tilesValue[5] === side && tilesValue[8] === side)
{
winner = side;

break;
}
}

side++;
}

if (winner > 0)
{

//Чистка уровня
resetTiles();

for(var i = 0; i < 8;)
{

tilesValue[i] = 0;

i++;
}

//Вывод сообщения
switch(winner)
{
case 1:
document.getElementById("gadgetContent").innerHTML = " Победа !!!";
break;
case 2:
document.getElementById("gadgetContent").innerHTML = " Поражение";
break;
case 3:
document.getElementById("gadgetContent").innerHTML = "Ничья";
break;
default:
document.getElementById("gadgetContent").innerHTML = "Ошибка";
break;
}
}
}

//Заполняем картинки
function resetTiles() {
var count = 0;
for(var x = 0; x < 3;)
{

for(var y = 0; y < 3;)
{

tilesValue[count] = 0;

var xOffset = x * 32;

var yOffset = y * 32;

tiles[count] = new Image();
tiles[count].src = "Images/empty.png";
gameField.appendChild(tiles[count]);
tiles[count].width = 32;
tiles[count].style.position = "absolute";
tiles[count].style.left= xOffset + "px";
tiles[count].style.top=yOffset + "px";
tiles[count].height = 32;

count++;

y++;
}

x++;
}
}

В принципе код Jscript не сложнее C#. Так как виджет работает на DOM принципе, то изменять свойства объектов — просто. Загрузка и расположения изображений происходит прямо в коде:
tiles[count] = new Image();
tiles[count].src = "Images/empty.png";
gameField.appendChild(tiles[count]);
tiles[count].width = 32;
tiles[count].style.position = "absolute";
tiles[count].style.left= xOffset + "px";
tiles[count].style.top=yOffset + "px";
tiles[count].height = 32;

При написании пользовался хорошими справочниками:http://www.w3schools.com/jsref/default.asp и http://javascript.ru/manual.

Теперь нужно добавить изображения в Images.

Все изображения для игры:

Теперь можно протестировать приложение.

Источник: http://gtsoftware18rus.3dn.ru

Категория: C++,C#,C | Добавил: gforcer (10.09.2011) | Автор: gforcer18

Просмотров: 5097 | Комментарии: 2 | Теги: jscript, win, Windows, разработка, гаджет, vista, gadget, silverlight, виджет, Widget | Рейтинг: 3.0/2

Всего комментариев: 2

Порядок вывода комментариев:

2 Engeltybreele (03.01.2012 15:50)

хорошее начало

1 gforcer (10.09.2011 23:36)

Эта статья, но формате Word-документа

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Друзья сайта

Демотиваторы


	Copyright Зямаев Денис © 2024