Flying Bus Game/ja: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
[[Flying Bus Game|English]] '''日本語'''
[[Category:Developing_with_Qt::Qt Quick::Demos]]<br />[[Category:Learning::Demos_and_Examples]]


=Flying Bus ゲーム=
[[Flying_Bus_Game|English]] '''日本語'''


==解説==
= Flying Bus ゲーム =


<span class="caps">QML</span> の力を試すために、C++ を一切使わずにこのゲームを作りました。ゲームエンジンは全て JavaScript で書かれ、(コメントを含め)たったの 300 行以下で動いています。
[YouTubeID:LTDJrMu24b8]


ゲームのコンセプトを決めるにあたり、デザインチームが一通りの画像を用意し、いくつかのアニメーションのイメージをフラッシュで作成しました。コンセプトが決まってから、このゲームの最初のバージョンを <span class="caps">QML</span> で作るまでは一日もかかりませんでした。この後、新しい要素を作成したり振る舞いを設定したりしたりという作業を行いました。
== 解説 ==
 
QML の力を試すために、C++ を一切使わずにこのゲームを作りました。ゲームエンジンは全て JavaScript で書かれ、(コメントを含め)たったの 300 行以下で動いています。
 
ゲームのコンセプトを決めるにあたり、デザインチームが一通りの画像を用意し、いくつかのアニメーションのイメージをフラッシュで作成しました。コンセプトが決まってから、このゲームの最初のバージョンを QML で作るまでは一日もかかりませんでした。この後、新しい要素を作成したり振る舞いを設定したりしたりという作業を行いました。


このゲームのフォルダ構造は、リソース、レベル、ソースの3つのフォルダに分かれています。
このゲームのフォルダ構造は、リソース、レベル、ソースの3つのフォルダに分かれています。


リソースフォルダにはゲーム用に使われるファイルが含まれています。このゲームでは画像形式のファイルのみになります。レベルフォルダには各レベルの情報が記載された <span class="caps">XML</span> ファイルがあり、ソースフォルダには <span class="caps">QML</span> ファイルと JavaScript が含まれます。
リソースフォルダにはゲーム用に使われるファイルが含まれています。このゲームでは画像形式のファイルのみになります。レベルフォルダには各レベルの情報が記載された XML ファイルがあり、ソースフォルダには QML ファイルと JavaScript が含まれます。


このゲームのような構成は他のアプリにも適用できるでしょう。このゲームは、キャンバス、スプライト、レベルローダー、ゲームエンジンの4つの要素から成り立っています。
このゲームのような構成は他のアプリにも適用できるでしょう。このゲームは、キャンバス、スプライト、レベルローダー、ゲームエンジンの4つの要素から成り立っています。


===キャンバス===
=== キャンバス ===


<span class="caps">QML</span> ではキャンバスは他の <span class="caps">QML</span> アイテムを含むシンプルな <span class="caps">QML</span> アイテムです。このゲームの場合、キャンバスは背景と前景の2つのレイヤから構成されます。
QML ではキャンバスは他の QML アイテムを含むシンプルな QML アイテムです。このゲームの場合、キャンバスは背景と前景の2つのレイヤから構成されます。


背景レイヤには雲や山、太陽などプレイヤーと関係しない全ての要素が含まれます。前景レイヤには敵やボーナスアイテム、障害物などのプレイヤーと関係する要素が含まれます。
背景レイヤには雲や山、太陽などプレイヤーと関係しない全ての要素が含まれます。前景レイヤには敵やボーナスアイテム、障害物などのプレイヤーと関係する要素が含まれます。


===スプライト===
=== スプライト ===


プレイヤー、敵、ボーナスアイテム、障害物がスプライトです。全てのスプライトは共通の <span class="caps">QML</span> 要素を親に持ち、位置、大きさ、不透明度、速度などのプロパティを持ちます。それぞれのスプライトは別々のファイルのため、状態やアニメーションなどを好きなように変更できます。
プレイヤー、敵、ボーナスアイテム、障害物がスプライトです。全てのスプライトは共通の QML 要素を親に持ち、位置、大きさ、不透明度、速度などのプロパティを持ちます。それぞれのスプライトは別々のファイルのため、状態やアニメーションなどを好きなように変更できます。


===レベルローダー===
=== レベルローダー ===


レベルローダーは (<span class="caps">XML</span> 形式の) レベルファイルを管理し、ゲームエンジンに適切な情報を渡します。この情報を元にスプライトが生成されます。QML では <span class="caps">XML</span> ファイルを読むための XmlListModel という簡単な方法があり、レベルローダーではこれを使用しています。
レベルローダーは (XML 形式の) レベルファイルを管理し、ゲームエンジンに適切な情報を渡します。この情報を元にスプライトが生成されます。QML では XML ファイルを読むための XmlListModel という簡単な方法があり、レベルローダーではこれを使用しています。


===ゲームエンジン===
=== ゲームエンジン ===


ゲームエンジンはこのゲームのコアロジックです。レベル情報を元にスプライトを動的に生成し、シーンの移動、衝突判定、ゲームの状態の制御などのロジックを処理します。このゲームではとても簡単な物理計算を使用しているためエンジン自体もとても小さいです。エンジンでより複雑なことをしたい場合には C++ と <span class="caps">QML</span> を組み合わせたアプリケーションも選択肢になります。
ゲームエンジンはこのゲームのコアロジックです。レベル情報を元にスプライトを動的に生成し、シーンの移動、衝突判定、ゲームの状態の制御などのロジックを処理します。このゲームではとても簡単な物理計算を使用しているためエンジン自体もとても小さいです。エンジンでより複雑なことをしたい場合には C++ と QML を組み合わせたアプリケーションも選択肢になります。


この経験から言えることは、QML での開発は UI を作成する上では命令的な <span class="caps">API</span> に対して大きなアドバンテージがあるということです。QML では UI を作成するのに必要なコードの行数を大きく減らすことができることが分かるでしょう。
この経験から言えることは、QML での開発は UI を作成する上では命令的な API に対して大きなアドバンテージがあるということです。QML では UI を作成するのに必要なコードの行数を大きく減らすことができることが分かるでしょう。


一例として、私が以前に作った C++ のアプリケーションを <span class="caps">QML</span> で作り直したところ、行数は 75% 少なく済みました。
一例として、私が以前に作った C++ のアプリケーションを QML で作り直したところ、行数は 75% 少なく済みました。


ゲーム開発では、QML はこのゲームのようなシンプルなものを作成するにはとてもよい選択となるでしょう。強力な状態管理/アニメーションのサポートとコンパクトな文法により、このようなゲームの開発がとても簡単にできます。
ゲーム開発では、QML はこのゲームのようなシンプルなものを作成するにはとてもよい選択となるでしょう。強力な状態管理/アニメーションのサポートとコンパクトな文法により、このようなゲームの開発がとても簡単にできます。


多くのゲームロジックをゲームエンジンから <span class="caps">QML</span> 側に移すことができ、エンジンの複雑さを大幅に減らせます。この UI でも、作成に必要なコードの行数を大幅に減らせました。
多くのゲームロジックをゲームエンジンから QML 側に移すことができ、エンジンの複雑さを大幅に減らせます。この UI でも、作成に必要なコードの行数を大幅に減らせました。


==ダウンロード==
== ダウンロード ==


===ソースコード===
=== ソースコード ===


http://qt.gitorious.org/qt-labs/mobile-demos/trees/master/qtflyingbus
http://qt.gitorious.org/qt-labs/mobile-demos/trees/master/qtflyingbus


flying bus や他のデモをダウンロードは以下のコマンドで行います。<br /> git clone git://gitorious.org/qt-labs/mobile-demos.git
flying bus や他のデモをダウンロードは以下のコマンドで行います。<br />git clone git://gitorious.org/qt-labs/mobile-demos.git


===バイナリ===
=== バイナリ ===


Mac: http://get.qt.nokia.com/demos/mac/qtflyingbus.dmg<br /> Maemo: http://get.qt.nokia.com/demos/maemo/qtflyingbus_0.1-1_armel.deb<br /> Symbian: http://get.qt.nokia.com/demos/symbian/qtflyingbus_installer.sis<br /> Windows: http://get.qt.nokia.com/demos/windows/qtflyingbus_setup.exe
Mac: http://get.qt.nokia.com/demos/mac/qtflyingbus.dmg<br />Maemo: http://get.qt.nokia.com/demos/maemo/qtflyingbus_0.1-1_armel.deb<br />Symbian: http://get.qt.nokia.com/demos/symbian/qtflyingbus_installer.sis<br />Windows: http://get.qt.nokia.com/demos/windows/qtflyingbus_setup.exe


'''注意:''' Symbian^3 端末にこの Qt Quick のデモアプリをインストールする場合、Qt 4.7.1 のベータ版が必要で、これをインストールすると Ovi Store クライアントや他の Qt アプリが動かなくなる可能性があります。Qt が 4.7.2 になるまでは個人携帯では試さない方がいいと思います。
'''注意:''' Symbian^3 端末にこの Qt Quick のデモアプリをインストールする場合、Qt 4.7.1 のベータ版が必要で、これをインストールすると Ovi Store クライアントや他の Qt アプリが動かなくなる可能性があります。Qt が 4.7.2 になるまでは個人携帯では試さない方がいいと思います。
この Qt Quick でもアプリとそれに必要な Qt 4.7.1 を端末に既にインストールしてしまい、アプリのアンインストールと Qt のダウングレードをしたい場合には、[[Qt-Quick-Demo-Apps-Downgrade|こちらの手順]] を参照してください。
===Categories:===
* [[:Category:Developing with Qt|Developing_with_Qt]]
** [[:Category:Developing with Qt::Qt Quick|Qt_Quick]]
*** [[:Category:Developing with Qt::Qt Quick::Demos|Demos]]
* [[:Category:Learning|Learning]]
** [[:Category:Learning::Demos and Examples|Demos_and_Examples]]

Revision as of 10:23, 24 February 2015


English 日本語

Flying Bus ゲーム

[YouTubeID:LTDJrMu24b8]

解説

QML の力を試すために、C++ を一切使わずにこのゲームを作りました。ゲームエンジンは全て JavaScript で書かれ、(コメントを含め)たったの 300 行以下で動いています。

ゲームのコンセプトを決めるにあたり、デザインチームが一通りの画像を用意し、いくつかのアニメーションのイメージをフラッシュで作成しました。コンセプトが決まってから、このゲームの最初のバージョンを QML で作るまでは一日もかかりませんでした。この後、新しい要素を作成したり振る舞いを設定したりしたりという作業を行いました。

このゲームのフォルダ構造は、リソース、レベル、ソースの3つのフォルダに分かれています。

リソースフォルダにはゲーム用に使われるファイルが含まれています。このゲームでは画像形式のファイルのみになります。レベルフォルダには各レベルの情報が記載された XML ファイルがあり、ソースフォルダには QML ファイルと JavaScript が含まれます。

このゲームのような構成は他のアプリにも適用できるでしょう。このゲームは、キャンバス、スプライト、レベルローダー、ゲームエンジンの4つの要素から成り立っています。

キャンバス

QML ではキャンバスは他の QML アイテムを含むシンプルな QML アイテムです。このゲームの場合、キャンバスは背景と前景の2つのレイヤから構成されます。

背景レイヤには雲や山、太陽などプレイヤーと関係しない全ての要素が含まれます。前景レイヤには敵やボーナスアイテム、障害物などのプレイヤーと関係する要素が含まれます。

スプライト

プレイヤー、敵、ボーナスアイテム、障害物がスプライトです。全てのスプライトは共通の QML 要素を親に持ち、位置、大きさ、不透明度、速度などのプロパティを持ちます。それぞれのスプライトは別々のファイルのため、状態やアニメーションなどを好きなように変更できます。

レベルローダー

レベルローダーは (XML 形式の) レベルファイルを管理し、ゲームエンジンに適切な情報を渡します。この情報を元にスプライトが生成されます。QML では XML ファイルを読むための XmlListModel という簡単な方法があり、レベルローダーではこれを使用しています。

ゲームエンジン

ゲームエンジンはこのゲームのコアロジックです。レベル情報を元にスプライトを動的に生成し、シーンの移動、衝突判定、ゲームの状態の制御などのロジックを処理します。このゲームではとても簡単な物理計算を使用しているためエンジン自体もとても小さいです。エンジンでより複雑なことをしたい場合には C++ と QML を組み合わせたアプリケーションも選択肢になります。

この経験から言えることは、QML での開発は UI を作成する上では命令的な API に対して大きなアドバンテージがあるということです。QML では UI を作成するのに必要なコードの行数を大きく減らすことができることが分かるでしょう。

一例として、私が以前に作った C++ のアプリケーションを QML で作り直したところ、行数は 75% 少なく済みました。

ゲーム開発では、QML はこのゲームのようなシンプルなものを作成するにはとてもよい選択となるでしょう。強力な状態管理/アニメーションのサポートとコンパクトな文法により、このようなゲームの開発がとても簡単にできます。

多くのゲームロジックをゲームエンジンから QML 側に移すことができ、エンジンの複雑さを大幅に減らせます。この UI でも、作成に必要なコードの行数を大幅に減らせました。

ダウンロード

ソースコード

http://qt.gitorious.org/qt-labs/mobile-demos/trees/master/qtflyingbus

flying bus や他のデモをダウンロードは以下のコマンドで行います。
git clone git://gitorious.org/qt-labs/mobile-demos.git

バイナリ

Mac: http://get.qt.nokia.com/demos/mac/qtflyingbus.dmg
Maemo: http://get.qt.nokia.com/demos/maemo/qtflyingbus_0.1-1_armel.deb
Symbian: http://get.qt.nokia.com/demos/symbian/qtflyingbus_installer.sis
Windows: http://get.qt.nokia.com/demos/windows/qtflyingbus_setup.exe

注意: Symbian^3 端末にこの Qt Quick のデモアプリをインストールする場合、Qt 4.7.1 のベータ版が必要で、これをインストールすると Ovi Store クライアントや他の Qt アプリが動かなくなる可能性があります。Qt が 4.7.2 になるまでは個人携帯では試さない方がいいと思います。