Розроблення додатка – гра «Перший мільйон»
МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ
НАЦІОНАЛЬНИЙ ТРАНСПОРТНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ТРАНСПОРТНИХ ТА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ
КАФЕДРА ІНФОРМАЦІЙНИХ СИСТЕМ І ТЕХНОЛОГІЙ
КУРСОВА РОБОТА
з дисципліни
"Крос-платформне програмування"
на тему
"Розроблення додатка – гра «Перший мільйон»"
Виконала: |
студентка гр. КН-ІV-1 Плотнікова В. В. |
Науковий керівник: |
|
Київ – 2013
Зміст
Вступ 3
Розділ І. Аналіз предметної області 4
Розділ ІІ. Теоретичні відомості 5
- Знайомство з Juce 5
- Візуальний редактор компонувань The Jucer 7
Розділ ІІІ. Створення додатку 14
- Розробка інтерфейсу 14
- Приклад реалізації роботи додатку 17
Висновок 22
Список використаних джерел 23
Додаток 1. Текст програми 24
Вступ
Дана курсова робота розроблена
для дисципліни «Кросплатформне
програмування». Що ж таке крос-платформне
програмування? Кросплатформне програмне
забезпечення – це ПЗ, працююче більш
ніж на одній апаратній платформі
і / або операційній системі. Типовим
прикладом є програмне
Кросплатформенними можна назвати більшість сучасних високорівневих мов програмування. Наприклад, C, С++, Free Pascal – кросплатформені мови на рівні компіляції, тобто для цих мов є компілятори під різні платформи.
Не менш важливі для платформ стандартизовані виконавчі бібліотеки. Зокрема, стандартом стала бібліотека мови Сі. З великих кроссплатформенних бібліотек – Qt, GTK +, FLTK, STL, Boost, OpenGL, SDL, OpenAL, OpenCL та Juce. Саме про останню і піде мова далі.
Juce – це відкритий кросплатформний інструментарій розробки ПЗ (фреймворк) для мови C + +, що використовується для розробки GUI додатків і плагинов. Мета Juce - дозволити компілювати один і той же вихідний текст у програми, однаково працюючі на Windows, Mac OS X і Linux (останні версії - також iPhone) платформах. Він підтримує різні середовища розробки і компілятори, такі як GCC, Xcode і Visual Studio.
Курсовий проект розроблений в одному з додатків бібліотеки Juce – додаток Jucer, що використовується для візуального проектування і редагування графічних інтерфейсів. Jucer також може згенерувати C++ код, що реалізовує обрану структуру графічного інтерфейсу.
Розділ І. Аналіз предметної області
Використовуючи кросплатформну бібліотеку Juce мови С++ треба створити платформно незалежний додаток гри «Перший мільйон».
Перший мільйон — український аналог однієї з найпопулярніших телевізійних ігор у світі «Who Wants to Be a Millionaire?». Щоб виграти головний приз 1 мільйон гривень гравцеві необхідно правильно відповісти на 15 запитань зростальної складності та вартості. Кожне запитання має 4 варіанти відповіді, з яких лише один правильний. Складність запитань постійно збільшується. Час на роздуми над кожним питанням у гравця необмежений.
У даній курсовій буде розроблено більш простий варіант цієї гри, де буде 5 питань та виграш у 100 тисяч гривень. Для кожного питання також буде 4 варіанти відповіді і лише одна правильна. Якщо відповідь буде не вірною Ви одразу програєте.
В основному питання стосуються тематики комп’ютерних технологій. Для правильних відповідей треба буде згадати про різні мови в комп’ютерних технологіях та про основні технологічні визначення та поняття.
Для початку роботи потрібно сформувати декілька файлів таких як main.cpp, TApplication.срр, TMainForm.cpp та TThirdForm.cpp. А сам Jucer при роботі згенерує ще 2 файли – TCentralComponent.cpp та TThirdComponent.cpp.
Для створення такого додатку в програмі Jucer збуде задіяно різні віджети та відредаговано їх властивості. Основними компонентами є Text Button (кнопка з текстом), Label (ярлик), Text Editor (поле введення). В них можна налаштувати колір та розмір самого компонента та шрифту, положення та відображення на формі.
Розділ ІІ. Теоретичні відомості
Знайомство з Juce
Бібліотека Juce (Jules Utility Class Extensions) – це відкритий кросплатформний інструментарій розробки ПЗ (фреймворк) для мови C + +, що використовується для розробки GUI додатків і плагінов. З першого погляду - це ще один тулкіт на С++ з розряду «все в одному». Однак дизайн бібліотеки, використовувані методики програмування і видатний зовнішній вигляд віджетів роблять Juce виключно оригінальним рішенням.
Juce працює в Windows, GNU / Linux,
MacOS X та iOS, причому підхід до
Спочатку Juce створювався
для написання утиліт для роботи
зі звуковими ефектами і активно
використовується для цих цілей
донині. У той же час він не
є вузьким рішенням і підходить
для створення практично будь-
У загальних рисах всю
функціональність Juce можна розбити
на кілька категорій (вони достатньо умовні
і не виділені в окремі модулі):
- Core – контейнери (несумісні з STL), рядки з підтримкою Unicode, доступ до файлової системи, потоки вводу-виводу, багатопотоковість і синхронізація, сигнали, таймери, перетворення типів, математика і випадкові числа і т.д.
- GUI – великий набір віджетів, підтримка тем, OpenGL, підтримка веб-камери, drag-and-drop, стандартні діалоги і т. д.
- The Jucer – візуальний дизайнер інтерфейсу. Включає також редактор фонової графіки, градієнтів і геометричних примітивів. The Jucer генерує готовий вихідний код для візуальних компонентів на С.
- Графіка – підтримка форматів JPEG, PNG, GIF і частково SVG, прозорість, субпіксельне згладжування, впровадження графіки у вигляді бінарних ресурсів, багатий набір векторних примітивів і градієнтів, незалежна від системи робота зі шрифтами.
- Звук – класи для прозорої роботи з різними звуковими серверами в усіх системах, підтримка форматів WAV, AIFF, FLAC і Ogg Vorbis, багатий набір звукових фільтрів, ефектів генераторів, конвертерів і плагінів. Повна підтримка Midi.
- Мережа – стандартні потоки працюють з протоколами HTTP
і FTP, низькорівневі сокети, абстрактна комунікація
між процесами. Крім того, підтримуються різні алгоритми шифрування, мається вбудований Zip-декомпрессор і т.п.
Візуальний редактор компонувань The Jucer
Розміщувати компоненти вікна
вручну – справа невдячна. На щастя, всю
чорну роботу можна покласти на Jucer, який
є візуальним редактором інтерфейсу. Запустимо
його і виберемо File → New component.
Назвемо клас нового компонента MyMainComponent.
Інші параметри необов'язково чіпати,
але при необхідності можна задати батьківський
клас, ініціалізацію полів в конструкторі
і попросити Jucer згенерувати додаткові
методи для реакції на різноманітні події.
Перейдемо на вкладку
«Subcomponents» - це і є візуальний редактор,
який допомагає розміщувати різні віджети.
Контекстне меню дозволяє вставляти стандартні
віджети або будь користувальницькі компоненти.
Додамо на форму два поля введення і кнопку
(див. рис.2.1).
Рис.2.1. Створення нового компонента в The Jucer
При виділенні компонента праворуч відкривається панель його властивостей. Всі вони інтуїтивно зрозумілі, крім властивостей x, y, width і height, які задають геометрію віджета. Поруч з ними є кнопки Mode, які відривають меню режиму розміщення.
Тут потрібно зробити невеличкий
відступ. У Juce немає «гумовою» компонування
за допомогою сайзеров, як в GTK + або
Qt. Замість цього положення
Наприклад, спробуємо зробити так, щоб кнопка завжди знаходилася праворуч і мала фіксовану ширину, а поля введення розтягувалися по ширині разом з вікном. Встановлюємо режим властивості x для кнопки Аbsolute distance from right of parent і переміщаємо її до правого краю вікна. Тепер кнопка прив'язана до правої кромці вікна. Її ширина за замовчуванням встановлена в режим Absolute width, тобто вона зберігає ті розміри, які ми її поставили.
Займемося першим полем вводу. За замовчуванням його положення відраховується від лівого краю вікна (Аbsolute distance from left of parent), що нам і потрібно, а ось ширина повинна бути не фіксованою, а залежною від ширини вікна. Встановимо режим поля width в Substracted from width of parent і розтягнемо поле так, щоб залишився лише невеликий зазор до кнопки. Тепер відстані до лівого і правого краю вікна зафіксовані, а ширина змінюється разом з вікном. Оскільки ширина кнопки фіксована, то все працює як треба і віджети не налазять один на одного.
Для другого поля введення можна вчинити так само, а можна встановити режим для width в Relative to textEditor, потім Percentage of width of textEditor і задати значення 100%. Тепер ширина другого поля завжди дорівнює ширині першого.
Виконавши View → Test Component, можна побачити нашу компоновку в дії і переконатися, що все працює як було задумано.
Вибравши File → Save as, зберігаємо компонент. The Jucer генерує файли .h і .cpp для класу MyMainComponent.
Файл MyMainComponent.cpp можна відкрити в The Jucer повторно, при цьому завантажиться створена компоновка. Це досягається включенням у вихідний код спеціальних коментарів, які розпізнаються програмою і містять всі необхідні метадані. Подивившись на згенерований код (це легко зробити на вкладці Code preview) легко переконатися, що написати щось подібне вручну було б вкрай утомливо. Основна «магія» укладена в методі resized (), який викликається при зміні розмірів вікна і потрібним чином вибудовує всі віджети.
У створеному коді у всіх «стратегічних» місцях вставлені блоки такого типу:
//[UserPaint] Add your own custom painting code here.. //[/UserPaint] |
Між такими коментарями (і тільки там!) Можна вставляти будь-який користувацький код. Будь-які зміни в інших місцях будуть втрачені при наступному збереженні файлу в Jucer.
У Juce використовується ідеологія – ієрархія віджетів відповідає ієрархічній вкладеності їх класів в коді, а не встановлюється вручну призначенням «батька», як, наприклад, в Qt. Всі віджети компонента рівноправні і знаходяться на одному рівні ієрархії. Якщо помістити на форму, наприклад, компонент GroupComponent, то віджети, поміщені всередину його рамки, не стануть його нащадками. Їхнє становище доведеться відредагувати вручну, встановлюючи режим Relative to groupComponent. Якщо використовується, наприклад, TabbedComponent, то кожна його вкладка – це незалежний компонент, який потрібно «намалювати» окремо. Властивість Content type кожної вкладки дозволяє вибрати цей компонент по імені або вставити з файлу, попередньо створеного в Jucer. При вставці з файлу компонент відразу відображається на формі, однак редагувати його «на льоту» не можна (це підкреслюється білим фоном без спрямовуючої сітки, див. рис.2.2). На щастя, в Jucer можна відкривати декілька компонувань одночасно. Якщо змінити і зберегти вкладену компоновку, то результат відразу ж буде видно у всіх інших компонуваннях, куди вона входить.
Рис.2.2. Робота з вкладеними компонуваннями в The Jucer
Редактор компонувань
в The Jucer страждає від загальної проблеми
багатьох тулкіта – відсутність сайзеров
і «гумових» компонувань. Чому проста
і елегантна ідея сайзеров так непопулярна
у творців «альтернативних» тулкіта, абсолютно
незрозуміло. І U, і Juce використовують складну
і громіздку систему логічного позиціонування,
проте наявність прекрасного візуального
редактора дещо згладжує недоліки такого
підходу в Juce. Можливість вказівки відносної
відстані від інших віджетів дозволяє
відносно легко створювати компоновки
аналогічні звичайним і табличним сайзерам,
проте повністю замінити їх вона не може.
Попробуйте, наприклад, розташувати по
горизонталі три віджету, які повинні
міняти ширину в пропорції 1:2:3 при розтягуванні
вікна не налезая один на одного!
На щастя, щось подібне сайзерам в Juce таки є. Клас StretchableLayoutManager є по суті дуже незграбним лінійним сайзером. Метод layOutComponents цього класу приймає масив покажчиків на віджети і впорядковує їх згідно з раніше заданим мінімальним, максимальним і віддається перевага розмірам:
//В конструкторе // Первый виджет может иметь размер от 50 до 100 пикселов, // предпочитаемый размер — 60% от размера контейнера myLayout.setItemLayout(0,50, // Второй виджет может иметь размер от 20% до 60% от размера // контейнера, предпочитаемый размер — 50 пикселов myLayout.setItemLayout(1,-0.2, // В методе resized() // Создаем массив указателей
на виджеты, которые хотим Component* comps[] = { myComp1, myComp2 }; // Размещаем два компонента
по вертикали в текущем myLayout.layOutComponents (comps, 2, 0, 0, getWidth(), ↵ getHeight(),true); |
Якщо в Qt або GTK віджет просто додається в кайзер в конструкторі, а розміри є властивостями самого віджета, то в Juce все складніше. Потрібно точно знати кількість віджетів в сайзере і їх бажані розміри, а в методі resized () доводиться створювати тимчасовий масив покажчиків. Клас StretchableLayoutManager недоступний у візуальному редакторі, що робить його застосування ще більш трудомістким. Тим не менш, навіть такий складний у застосуванні сайзер краще, ніж нічого.
The Jucer дозволяє дуже просто
і елегантно працювати з будь-
в програмі графічний файл juce.png. Переходимо
на вкладку Resources і додаємо цей файл у список.
при збереженні бінарні дані з цього файлу
переводяться у форму звичайного масиву
С і безпосередньо вставляються в код.
Відповідний рядок має вигляд:
static const unsigned char ↵ resource _ MyMainComponent _ juce _ png[] = { 137,80,78,71,... |
У класі автоматично створюється змінна cachedImage_juce_png типу Image *, яка ініціалізується даними цього масиву в конструкторі. Її можна використовувати в коді для доступу до ресурсу. Весь службовий код для роботи з такими ресурсами (а його чимало) створюється автоматично.
Маючи набір графічних файлів, завантажених у вигляді ресурсів, можна переходити до однієї з найбільш вражаючих особливостей The Jucer - редактору фонової графіки (див. рис.2.3). Перейдемо на вкладку Graphics. Тут можна редагувати фон нашого компонента, що відображається під віджетами. З контекстного меню можна додати різні геометричні примітиви, криві, малюнки і текст. Для кожного компонента можна вибрати заливку кольором або у вигляді лінійного або радіального градієнта, товщину і колір ліній і т.п. Контрольні точки градієнтів і кривих можна перетягувати мишею. Також можна задавати прозорість для всіх елементів, заповнювати фігури зображеннями і навіть перетворювати текст в криві. Редактор гранично зрозумілий і дуже приємний в роботі. Його, звичайно, не можна порівнювати з повновагими векторними редакторами зразок Inkscape, але зі своєю функцією створення гарного фону для віджетів він справляється на відмінно.
Рис.2.3. Редагування фонової графіки в The Jucer
Код малювання поміщається в метод paint () нашого класу і, при необхідності, в метод resized (). Вивчивши його, легко зрозуміти логіку роботи операцій малювання в Juce. Зокрема, чітко видно, як The Jucer бере на себе всю чорну роботу по масштабуванню і розміщенню примітивів при зміні розмірів вікна.
Розділ ІІІ. Створення додатку
Розробка інтерфейсу
Запускаємо The Jucer і вибираємо у меню File> New Component. З'явиться віджет з вкладками, що відображає інформацію про створюваний компонент. На вкладці Class в списку General class settings задаємо ім'я класу компоненту (class name), назву компонента (component name), якщо воно відрізнятиметься від назви класу, батьківський клас / класи (parent classes), параметри конструктора (constructor params), початкові розміри віджета (initial width і initial height), а також вибрати у випадаючому списку fixed size, чи будуть розміри віджета підлаштовуватися під розміри компонента-контейнера або головного вікна (Resize component to fit workspace) або ж створюваний компонент буде з незмінними розмірами (рис.3.1).
Рис.3.1. Програма The Jucer. Редагування
властивостей
класу компонента
На вкладці Subcomponents спроектовуємо зовнішній вигляд нашого компонента, розміщуючи на його поверхні різні віджети і редагуючи їх властивості у списку праворуч (рис.3.2). Біле поле з координатною сіткою – це і є заготовка нашого майбутнього компонента, на який можна додавати стандартні або призначені для користувача віджети за допомогою контекстного меню. У ньому доступні наступні стандартні компоненти: Text Button (кнопка з текстом), Toggle Button (радіокнопка), Slider (повзунок), Label (ярлик), Text Editor (поле введення), Combo Box (випадаючий список), Group Box (груповий блок ), Hyperlink Button ("кнопка" - гіперпосилання), Viewport (полі перегляду), Tabbed Component (компонент з вкладками), Tree View (деревоподібний список), Image Button (кнопка з зображенням). Крім того, контекстне меню дозволяє редагувати колір фону віджета (у меню пункт "Edit background graphics").
Рис.3.2. Редагування зовнішнього вигляду компоненту в програмі The Jucer
Отже, створюємо головну форму яка складається з 4-х TextButton та 1-го Label (це для 1го запитання). Дублюємо елементи ще для 4-х запитань. При цьому вони накладаються один на одного. На про дубльовані елементи встановлюємо setVisible(false); - таким чином вони з’являються лише тоді коли буде потрібно.
Наприклад, при правильній відповіді на перше запитання елементи які йому відповідають автоматично стають setVisible(false), а елементи які відповідають за друге запитання setVisible(true).
Створюємо «інформативну» форму, яка складається з TextButton (двох дубльованих, вони накладені одна на одну) та TextEditor-а.
Продубльовані клавіші мають 2 функції:
- Перша викликається коли відповідь вірна. Вона лише закриває «інформативну» форму.
- Друга коли відповідь невірна: вона закриває головне вікно та всю програму.
Зміст TextEditor-а
залежить від правильності відповідей.
Якщо відповідати вірно він показує скільки
коштів зараховано в «Банк» гравця. Якщо
відповідь невірна з’являється повідомлення
“You loseL” ,що свідчить про те, що гравець
програв і гра завершена.
Приклад реалізації роботи додатку
- Запускаємо файл «gg.exe», який знаходиться у головному каталозі проекту - gg\Builds\VisualStudio2010\
Debug\ gg.exe. одразу ж відкривається перше питання гри:
- Якщо відповісти не правильно з’явиться вікно яке сповістить про те, що гравець програв (тиснемо кнопку «Ок»):
- Тепер продемонструємо всі питання з
правильними відповідями. На перше питання відповідь була – «С++». При правильній відповіді гравець виграє 1тисячу гривень:
- Правильна відповідь на друге питання – «3» (це інкапсуляція, успадкування та поліморфізм). Гравець виграє 5 тисяч гривень:
- Відповідь на третє питання – «Список» (точніше лінійний список по принципу LIFO: last in — first out). Виграш становить 20 тисяч гривень:
- Четверте питання трошки складніше – «HTML». Виграш – 50 тисяч гривень:
- Та останнє питання, відповідь на яке приносить виграш у 100 тисяч гривень, правильна відповідь – «85»балі
в (адже цей додаток працює не зовсім так як справжня гра «Перший мільйон»):
- Гра завершена. Головний приз
– 100 тисяч гривень виграє тільки то й, хто знає відповіді на всі п итання!
Висновок
Juce являє собою
The Jucer дозволяє редагувати
властивості компонентів й
В даній курсовій роботі за допомогою кросплатформної бібліотеки Juce на мові С++ було створено платформнонезалежний додаток – гра «Перший мільйон». Для коректної роботи був використаний метод setVisible (bool shouldBeVisible), що дозволяє відображати або ховати вікно для доступу користувача, та стандартні віджети такі як Text Editor (поле введення), Text Button (кнопка з текстом) та Label (ярлик).
Список використаних джерел
- «Open Source» — электронное приложение к журналу «Системный администратор» [http://osa.samag.ru/]
- Степанов Е.О., к.ф.-м.н. Ярцев Б.М. - Учебно-методическое пособие по дисциплине «Архитектуры и технологии разработки распределенного программного обеспечения»
- Пол Эбрахамс, Майкл Болл и др. - Язык программирования C++. Вводный курс
- Інтернет університет інформаційних технологій [http://www.intuit.ru/]
- Універсальна інтернет-енциклопедія [ru.wikipedia.org]
Додаток 1. Текст програми
TApplication.cpp
#include "TApplication.h"
#include "TMainForm.h"
#include "TThirdForm.h"
//----------------------------
TApplication::TApplication() : pMainWindow(0), pThirdWindow(0)//
{
}
//----------------------------
TApplication::~TApplication()
{
}
//----------------------------
void TApplication::initialise(const String& sCommandLine)
{
pMainWindow = new TMainForm(); // Создаём главное окно программы
}
//----------------------------
void TApplication::shutdown()
{
if(pMainWindow != 0) delete pMainWindow;
//if(pSecondWindow != 0) delete pSecondWindow;
if(pThirdWindow != 0) delete pThirdWindow;
}
//----------------------------
void TApplication::
{
quit(); // Завершаем работу приложения
}
//----------------------------
const String TApplication::
{
// Задаём имя приложения
// (будет отображаться в заголовке главного окна)
return "Nika";
}
//----------------------------
const String TApplication::
{
// Получаем версию приложения из опций проекта
return ProjectInfo::versionString;
}
//----------------------------
bool TApplication::
{
// Запрещаем запуск более одного экземпляра приложения
return false;
}
//----------------------------
TCentralComponent.cpp
#include "TMainForm.h"
#include "TCentralComponent.h"
#include "TThirdComponent.h"
#include "TThirdForm.h"
#define tr(s) String::fromUTF8(s)
//[MiscUserDefs] You can add your own user definitions and misc code here...
//[/MiscUserDefs]
//============================
TCentralComponent::
: label (0),
label2 (0),
label3 (0),
label4 (0),
label5 (0),
textButton (0),
textButton2 (0),
textButton3 (0),
textButton4 (0),
textButton5 (0),
textButton6 (0),
textButton7 (0),
textButton8 (0),
textButton9 (0),
textButton10 (0),
textButton11 (0),
textButton12 (0),
textButton13 (0),
textButton14 (0),
textButton15 (0),
textButton16 (0),
textButton17 (0),
textButton18 (0),
textButton19 (0),
textButton20 (0),
cachedImage__1_png3 (0)
{
//pSecondWindow = new TSecondForm();
//pSecondWindow->setVisible(
pThirdWindow = new TThirdForm();
pThirdWindow->setVisible(false
addAndMakeVisible (label = new Label (L" new label",
label->setFont (Font (L"Times New Roman", 19.6000f, Font::bold));
label->setJustificationType (Justification::centred);
label->setEditable (false, false, false);
label->setColour (Label::textColourId, Colour (0xfffffefe));
label->setColour (Label::outlineColourId, Colour (0x0));
label->setColour (TextEditor::textColourId, Colours::black);
label->setColour (TextEditor::
addAndMakeVisible (label2 = new Label (L" new label2",
label2->setFont (Font (L"Times New Roman", 19.6000f, Font::bold));
label2->setJustificationType (Justification::centred);
label2->setEditable (false, false, false);
label2->setColour (Label::textColourId, Colour (0xfffffefe));
label2->setColour (Label::outlineColourId, Colour (0x0));
label2->setColour (TextEditor::textColourId, Colours::black);
label2->setColour (TextEditor::
label2->setVisible(false);
addAndMakeVisible (label3 = new Label (L" new label2",