Навигация
Категории
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#
Профиль
Статистика
Rambler's Top100

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Locations of visitors to this page
Главная » Статьи » Программирование » 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.

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

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

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

Вот другие параметры:

      1. 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>&#169; 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;"/>


<!-- Game Field >>> --><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. Без него виджет просто не будет выполняться, хотя установить его можно.


<!-- Game Field >>> --><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
Просмотров: 4168 | Комментарии: 3 | Теги: jscript, win, Windows, разработка, гаджет, vista, gadget, silverlight, виджет, Widget | Рейтинг: 3.0/2
Всего комментариев: 3
3  
http://www.forms-mtm.ru/ - пошив одежды

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

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