Разработка Судоку для Windows 8.1

в 9:49, , рубрики: microsoft, windows, Windows 8.1, разработка, разработка приложений, метки: ,

Давно хотел разработать приложение для Windows 8. Однако начал воплощать мечту как только вышла Windows 8.1. Посмотрел магазин приложений, а он пустой, тем более на русском языке практически ничего нет, а что есть — с переводом через google translate.
В этой статье постараюсь отметить наиболее интересные моменты, связанные именно с разработкой приложения для win 8.1.
Вопрос: с чего начать разработку? Хочется что-то простое и полезное для себя. Итак: Судоку. 

Судоку Windows 8.1

Разработка судоку windows 8.1

Судоку представляет собой квадрат размером 9х9, который разделен на меньшие квадраты размером 3х3.
Цель игры — заполнить свободные клетки цифрами от 1 до 9 так, чтобы в каждом столбце, строке и в малом квадрате каждая цифра встречалась только один раз.

Подготовка

Для разработки мобильного приложения на Windows 8.1 понадобится:

  • Microsoft Visual Studio 2013
  • Blend 2013
  • Идея приложения
  • Дизайн или макет приложения

Я разделил решение на 2 проекта: Core и проект для Windows 8.1. В Core вынес все основные модули, которые могут использоваться на других платформах. Это реализация алгоритма, перечисления и модели данных).
Core создан как Portable Class Library. Какого же было удивление, когда не обнаружил в нем поддержку async / await и некоторых других классов из стандартного набора .NET. Решается это подключением nuget пакетов: Microsoft.Bcl, Microsoft.Bcl.Async, Microsoft.Bcl.Build и дополнительно подключаем Newtonsoft.Json для серилизации данных.

Жизненный цикл приложения

Все приложения для магазина приложений Windows следуют этому  жизненному циклу (см. рисунок). При запуске приложения оно получает статус Running. Затем, при выключении пользователем или сворачивании приложения, или других случаях, программа получит уведомление о Suspending. В случае, если операционная система решит закрыть приложение из режима Suspended, то никаких дополнительных уведомлений не будет. В случае восстановления работы приложения из этого режима будет соответствующее уведомление.

windows 8.1 lifecycle

Приложение не получает уведомление о закрытии. Единственной возможностью сохранить важные данные пользователя является обработка события OnSuspending в App.xaml.cs. Для того, чтобы тестировать переключение между режимами необходимо включить дополнительный ToolBar (DebugLocation), появится панель управления приложением.

suspend toolbar

При создании проекта VS создает дополнительные классы. Один из них это SuspensionManager, который создает обертки для асинхронного сохранения и восстановления данных. Важно делать это асинхронно, чтобы, во-первых, пользователь не ждал загрузки/выгрузки приложения, во-вторых, потому что приложению дается определенное конечное время на сохранение своего состояния.

Графика

С графикой возникло много сюрпризов. Огромный плюс ОС, что она поддерживается на многих устройствах. Но для этого необходимо все правильно сделать.
Что касается изображений: необходимо загрузить их в нескольких масштабах. Файл загружается по обычному имени, а физически в проекте находятся например такие файлы: en-uslogo.scale-100.png, en-uslogo.scale-140.png. Что-то похожее есть с iOS разработкой, где изображения сохраняются в 2-х размерах (ретина и не ретина) и имеют названия image@2x.png и image.png соответственно.
В Windows 8.1 (и 8 тоже) необходимо подготовить 4 размера изображения для масштабов: 80, 100, 140, 180. Об этом подробнее можно прочитать здесь на русском  и здесь (msdn)
В своем проекте я выбрал фон максимального размера и не стал создавать дополнительные изображения, а установи Stretch=UniformToFill.

Uniform C# image

Отдельного внимания заслуживает создание логотипа. Здесь пришлось повозиться и создать его во всех рекомендуемых размерах, так что файлов вышло много:

logo windows 8.1 apps

Структура приложения

Решено было сделать приложение на одной странице (да больше и не нужно). Хотелось простого приложения, без надоедливых форм, БЕЗ РЕКЛАМЫ. Простое приложение для игры. Обнаружил, что можно запускать Desktop приложения с прикрепленным Snapped приложением из магазина, что на широкоформатных мониторах оказалось очень удобным. А значит в список хотелок добавился этот режим к портретному и Filled. Итого 4 варианта структуры приложения.

snapped view

Blend

Сам инструмент Blend – удобный для создания дизайна приложения (если не обращать внимания на его частые ошибки). На странице с игрой заранее разместил все элементы управления, а в динамике при изменении размера или режима буду переключать их.

blend C#

Далее, в зависимости от положения экрана, изменяю размер. ВАЖНО изменять размер шрифта тоже. Т.к. 15 кегль на мониторе 2500px будет менее чем заметен.
Делаю примерно так:

Код изменения размера

double scaleFactor = stackControlsWidth / StyleHelper.StackControlsBaseWidth; //Делим на ширину дизайна, чтобы получить масштаб для текущего размера.
private void GamePage_OnSizeChanged(object sender, SizeChangedEventArgs e)
{

 #region Получение текущего статуса
            ApplicationViewState state = ApplicationViewState.FullScreenLandscape;
            ApplicationViewOrientation orientation = ApplicationView.GetForCurrentView().Orientation;


            double pageWidth = this.ActualWidth;
            bool isSnapped = pageWidth < StyleHelper.SnappedMinWidth;


            if (orientation == ApplicationViewOrientation.Portrait && !isSnapped)
            {
                state = ApplicationViewState.FullScreenPortrait;
            }
            else
            {
                if (isSnapped)
                {
                    state = ApplicationViewState.Snapped;
                }
                else if (StyleHelper.IsFilledMinWidthByScreenSize(pageWidth))
                {
                    state = ApplicationViewState.Filled;
                }
                else
                {
                    state = ApplicationViewState.FullScreenLandscape;
                }
            }
            #endregion

	//Далее обновление размеров всех необходимых элементов

}

Panes

Как элемент из новой системы управления настройками приложения Panes, решено было добавить как минимум 1 Pane (О приложении).

windows 8.1 panes

Подключать его следующим образом

protected override void OnWindowCreated(WindowCreatedEventArgs args)
        {
            SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;
        }

        private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Add(new SettingsCommand(
                "About", "О приложении", (handler) => ShowCustomSettingFlyout()));
        }

        public void ShowCustomSettingFlyout()
        {
            AboutFlyout CustomSettingFlyout = new AboutFlyout();
            CustomSettingFlyout.Show();
        }

Themes

2 дополнительных View создано для выбора новой игры и поздравлении об успешном прохождении текущей

xaml C# windows 8.1

Эти представления также необходимо сделать масштабируемыми.

Публикация

Процесс публикации оказался очень интересным. Удивительно, приложение было опубликовано в магазине общим счетом за 8 часов, с учетом одного отказа.

windows 8.1 cert

Отказали по причине отсутствия сертификата возраста для игры. Оказывается, в России обязателен сертификат возраста для игр.

windows 8.1 cert 2

По документации создал сертификат и отправил на модерацию снова. Второй раз приложение прошло все проверки за 2 часа и оказалось доступно в магазине. Стоит заметить, что приложение очень простое. Не содержит подключения к сети и других возможностей. Также, ни о каком контенте, который можно проверить говорить не приходится, его просто нет.

Итоги

Разработано приложение за 40 часов. Правда делал его 1 месяц. Приложение получилось легким, быстрым и, на мой взгляд, удобным в использовании. В первую версию не попали начальные задумки, такие как: отмена хода, подсказки, таблица результатов (с сервера). Думаю, сделаю в обновлениях, если будут желающие и играющие люди.

Сделана поддержка всех разрешений экрана и 4-х режимов приложения (Full, Filled, Snapped, Portrait).

Опубликовано приложение без рекламы и смс, сейчас занимаюсь WinPhone версией. Если есть желающие помочь, готов открыть исходный код и публиковать в соавторстве (Win 8.1 так и сделано).

Автор: KLUBS

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js