Qt QuickおよびBox2d：物理シミュレーション

この投稿は、コンテスト「 Smart Posts for Smart Posts 」に参加しています



現時点では、多くのプログラマーがアプリケーションやゲームの開発をQt Quickトラックに移行することを急ぐことはありませんが、テクノロジー自体を取り巻くインフラストラクチャは日々成長し、発展するだけです。



そのため、2次元空間での物理学のシミュレーションがそれになりました。 むしろ、QMLプラグインの登場前。 固有のQt Quickにより、Box2D物理エンジンをアプリケーションに簡単に統合できます。 今日はこれについてお話します。 より正確には、単純なアルカノイドの実装、単純なゲームをどれだけ素早く作成できるか、物理エンジンやほとんどなじみのない用語で作業する前に分析してみましょう。

QMLとBox2dをバインドする

まず、プラグインのソースコードを取得する必要があります。 これを行うには、リンクgitorious.org/qml-box2d/qml-box2d/trees/masterをクリックし、右のボタン「マスターをtar.gzとしてダウンロード」をクリックします。 アーカイブを脇に置き、Qt Creatorに移動します。



ここで、「Qt Qucik Application」などの新しいプロジェクトを作成します。 ウィザードで、名前、ファイルシステム内の場所を入力し、Qtプロファイルを選択して、完了します。



そして今、最も重要な部分の1つが始まります。 そして通常、他の言語や技術で最も難しいものの1つです。 実際に、新しく作成したアプリケーションにプラグインを接続する必要があります。 これを行うには、作成されたアーカイブをアプリケーションのルートディレクトリに解凍し、作成されたディレクトリの名前をqml-box2d-qml-box2dからqml-box2dに変更します。 Bアプリケーションの.proファイルに新しい行を1行追加します。

include(qml-box2d/box2d-static.pri)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、main.cppを次の形式にします。

 #include <QtGui/QApplication> #include "qmlapplicationviewer.h" #include "box2dplugin.h" Q_DECL_EXPORT int main(int argc, char *argv[]) { QScopedPointer<QApplication> app(createApplication(argc, argv)); Box2DPlugin plugin; plugin.registerTypes("Box2D"); QScopedPointer<QmlApplicationViewer> viewer(QmlApplicationViewer::create()); viewer->setOrientation(QmlApplicationViewer::ScreenOrientationLockLandscape); viewer->setMainQmlFile(QLatin1String("qml/Quickanoid/main.qml")); viewer->showExpanded(); return app->exec(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、＃include "box2dplugin.h"という行にプラグインヘッダーが含まれており、

  Box2DPlugin plugin; plugin.registerTypes("Box2D");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

QMLで将来利用可能になり必要となるQt / Box2Dのタイプをアプリケーションに登録します。

以上です。 これは、プラグインを静的にリンクされたライブラリとして接続するのに十分です。 もちろん、プラグインは独立したユニットとして組み立てられ、システム内のすべてのQMLプラグインの共通ディレクトリに配置できます。 しかし、最初のオプションは私たちの目的にも適しています。 結果のプロジェクトの外観は、およそ次のとおりです。





ここでアプリケーションをコンパイルしようとすると、標準のHello Worldが表示されます。これは、Qt Quickのデフォルトプロジェクトのテンプレートです。 しかし、それは面白くありません。 物理学の使用に興味があります。

ゲームの説明を形式化する

そこで、アルカノイドをどうするかを決めました。 このプランのおもちゃに必要なものをリストします。

• デフォルトのウィンドウは360x640です-将来のモバイルデバイスへの移植を容易にするため。 そしてもちろん、横長モードで修正します。
• アプリケーションの背景は単純な図であり、それに対して再生すると便利です。
• 窓の端で私たちの世界に接する4つの壁。
• 世界を飛んでいるボール。
• ボールを打つための、ウィンドウの下部にあるプラットフォーム。
• 窓の上部にあるいくつかのレンガは、ボールで叩き落とさなければなりません。
• 画面上の時間カウンター。
• ゲームの画面を開始および終了します。

完了したタスクを実現します

このシンプルなTKについては、引き続き作業を進めます。 上記のように、main.cppで、アプリケーションに横モードで起動するように既に指示しました。 これは、C ++を編集する必要があることを意味します。コードはありません。 main.qmlファイルを開いて、次の形式にします。

 import QtQuick 1.0 import Box2D 1.0 Image { id: screen; source: "images/bg.jpeg" width: 640 height: 360 World { id: world width: screen.width height: screen.height gravity.x: 0 gravity.y: 0 } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちは何をしましたか？ 640x360のサイズのウィンドウを作成し、背景を設定して、将来的にすべての物理オブジェクトの祖先となるWorldタイプの子を1つ追加しました。 ご想像のとおり、Worldオブジェクトはゲームワールド全体を記述し、その基本パラメーターを設定します。

• 重力-XおよびY重力：このアプリケーションでは、重力は必要ありません。
• そして、残念ながら、私は問題を抱えています：timeStep、velocityIterations、positionIterations、frameTime

それらの説明は、ヘッダーファイルbox2dworld.hにあります。



3行の空の物理世界はクールです。 しかし、静的で希釈しましょう。 または壁、あなたが好きなもの。 新しいQMLファイルを作成し、Wall.qmlという名前を付けます。 アプリケーションの横に追加して、次の内容を入力します。

 import QtQuick 1.0 import Box2D 1.0 Body { property alias image: image.source bodyType: Body.Static fixtures: Box { anchors.fill: parent friction: 1.0 } Rectangle { anchors.fill: parent color: "brown" } Image { id: image anchors.fill: parent source: "images/wall.jpg" fillMode: Image.Tile } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

理論破り

壁は、シーン上のすべてのオブジェクト（および、Woldオブジェクトは本質的にシーンです）と同様に、Bodyタイプのオブジェクトです。 したがって、Bodyはすべての物理要素の基本クラスです。 次のプロパティがあります。

• active-要素の物理を有効/無効にします
• linearVelocity-線形加速
• フィクスチャ-衝突が決定されるボディ境界
• bodyType-静的、動的、または運動学的なボディタイプ
• fixedRotation-回転を無効にします
• sleepingAllowed-物理を自動的にオフにしてリソースを節約できるようにします
• linearDamping、angularDamping、bullet-一目ではわかりません

そのため、ボディは他のオブジェクトとの衝突を処理できません。 体にこれを教えるには、fixturesプロパティを設定する必要があります。 このプロパティの値は、Circle、Box、およびPolygonです。 それらはすべて、他のオブジェクトとの対話を担当するFixture基本クラスの子孫です。 もちろん、QMLからはアクセスできませんが、3つの子孫からのみアクセスできます。 明確にするために、利用可能なプロパティをリストします。

フィクスチャクラス：

• 密度-比重
• 摩擦-摩擦力
• 反発-弾力性/反動
• groupIndex-グループ内のインデックス（おそらくグループは1つのBodyオブジェクトです）
• collidesWith-オブジェクトのリスト。 現在のオブジェクトが現在接触しているもの
• センサー、カテゴリー-追加パラメーター

各子孫は、独自のプロパティを使用してこのクラスを少し拡張します。

• Boxクラスは新しいプロパティを追加しませんが、標準の幅と高さを使用して四角形の境界線を指定します。
• Circleクラスにはradiusプロパティが導入されていますが、これは奇妙なことに、ホイールなどの円形オブジェクトの半径です。
• Polygonクラスは、より正確な物理シミュレーションのために、オブジェクトの頂点のリストを含むバーティクルプロパティを追加します。

練習に戻る

理論から、壁は長方形（ボックス）などの物理的なボディ（ボディ）であり、塗りつぶしのある画像でグラフィカルに表されることが明らかになります。 そして今、1つの壁があるので、必要な数の壁を作成できます。それらは必要です。

 Wall { id: wallLeft width: 10 anchors { bottom: parent.bottom left: parent.left top: parent.top } } Wall { id: wallRight width: 10 anchors { bottom: parent.bottom right: parent.right top: parent.top } } Wall { id: wallTop height: 10 anchors { left: parent.left right: parent.right top: parent.top } } Wall { id: wallBottom height: 10 anchors { left: parent.left right: parent.right bottom: parent.bottom } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてを保存してアプリケーションを実行すると、画面上に背景画像と4つの壁が表示され、エッジの周りの世界がフレーミングされます。



さらに、計画によれば、私たちは世界の中で飛んで壁にぶつかるボールを持っています。 ボールを説明するには、Ball.qmlファイルを作成し、次の性質のコンテンツを入力します。

 import QtQuick 1.0 import Box2D 1.0 Body { id: ball fixedRotation: false sleepingAllowed: false fixtures: Circle { id: circle radius: 12 anchors.fill: parent density: 0; friction: 10; restitution: 1.05; } Image { id: circleRect anchors.centerIn: parent width: circle.radius * 2 height: width smooth: true source: "images/ball.png" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

壁と同じですが、Boxの代わりにCircleがあります。 Worldオブジェクトの最後の壁を記述した後、作成したワールドにボールを追加し、ボールの説明を追加します。

 Ball { id: ball x: parent.width/2 y: parent.height/2 }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、画面の中央にボールがありますが、重力がなく、直線加速度がないため、どこにも移動しません。 なんて賢い...

次のステップは、ボールを打つ唯一のプレーヤーコントロールを表すプラットフォームです。 前のスキームによると、その中の新しいPlatform.qmlファイル：

 import QtQuick 1.0 import Box2D 1.0 Body { id: platform width: platformBg.width height: platformBg.height x: parent.width/2 - width/2 y: parent.height - platformBg.height - 5 bodyType: Body.Static fixtures: Box { id: platformBox anchors.fill: parent friction: 10 density: 300; } Image { id: platformBg smooth: true source: "images/platform.png" } MouseArea { anchors.fill: parent drag.target: platform drag.axis: Drag.XAxis drag.minimumX: 0 drag.maximumX: screen.width - platform.width } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この物理オブジェクトは、ユーザーがマウス/指カーソルを水平方向に使用して画面上で駆動できるようにするという点で他と異なります。 main.qmlで、ボールの説明の後に、プラットフォームの説明を追加します。

 Platform { id: platform }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点では、私たちの壁を思い出してください。 利益のために、それらが機能することは確かですが、画面のサイズによって制限されるため、画面の外側に壁を隠すことができます。 カルスの目と干渉しないように。 これを行うには、World内の各Wallオブジェクトで、左leftMargin：-width、rightrightMargin：-width、topMargin：-height、bottomMargin：-heightのいずれかのプロパティを追加します。 その後、再度実行して、得られるものを確認します。





計画の次の項目。 ボールでノックダウンするレンガ。 しかし！ 画面に十分なスペースがないことを忘れてはなりません。 したがって、ゲームのこの部分を異なる方法で実装しようとします。 つまり、画面の上部にはいくつかの緑のレンガがあり、それらを常にボールで剥がす必要がありますが、赤にはなりません。 レンガが完全に赤くなる場合-それを打つことはすでに役に立たない。 そして、ゲームでは、すべてのレンガが赤くなるまでの時間をカウントするタイマーを導入します。 緑から赤への遷移のアニメーションは、たとえば20秒になります。 レンガが完全に赤くなると消えます。 なんとかブリックに乗れると、20秒タイマーがリセットされ、ブリックが再び赤くなり始めます。 Brick.qmlファイルのブリックの説明から始めましょう。

 import QtQuick 1.0 import Box2D 1.0 Body { id: brick width: parent.width/5 - 5 height: 15 anchors { top: parent.top topMargin: -height/2 } signal disappear() property bool contacted : false bodyType: Body.Static fixtures: Box { anchors.fill: parent friction: 1.0 onBeginContact: { contacted = true } onEndContact: { contacted = false } } Timer { id: timer interval: 20000; running: true; repeat: false onTriggered: { brick.visible = false; brick.active = false; disappear(); } } Rectangle { id: brickRect anchors.fill: parent radius: 6 state: "green" states: [ State { name: "green" when: brick.contacted PropertyChanges { target: brickRect color: "#7FFF00" } PropertyChanges { target: timer running: false } }, State { name: "red" when: !brick.contacted PropertyChanges { target: brickRect color: "red" } PropertyChanges { target: timer running: true } } ] transitions: [ Transition { from: "green" to: "red" ColorAnimation { from: "#7FFF00"; to: "red"; duration: 20000; } } ] } function show() { brick.visible = true; brick.active = true; state = "green" } function hide() { brick.visible = false; brick.active = false; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ここでも複雑なことはありません：ボディの説明、その表示の説明、それらの間の遷移のスムーズなアニメーションを伴う2つの状態、ボールとの各衝突後の再起動で20秒をカウントするタイマー、および補助機能show（） main.qmlファイルで、プラットフォーム宣言の後に、ブリックの宣言を追加します。

 Brick { id: brick1 x: 3; onDisappear: bricksCount-- } Brick { id: brick2 anchors { left:brick1.right leftMargin: 5 } onDisappear: bricksCount-- } Brick { id: brick3 anchors { left:brick2.right leftMargin: 5 } onDisappear: bricksCount-- } Brick { id: brick4 anchors { left:brick3.right leftMargin: 5 } onDisappear: bricksCount-- } Brick { id: brick5 anchors { left:brick4.right leftMargin: 5 } onDisappear: bricksCount-- }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ちなみに、行要素と繰り返し要素を使用しなかった理由を聞かないでください。これらを使用して、Bodyタイプの要素を自動的に作成すると、アプリケーションがクラッシュします。 ファイルの最初に、高さと幅を決定した後、新しい変数の宣言を追加します。

 property int bricksCount: 5
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それに応じて、たとえば2に等しい場合、残りのレンガの数を考慮します-ゲームを終了します。 つまり、ユーザーとゲームとのやり取りのロジックは単純です-少なくとも3つのブリックができるだけ画面に残っている必要があります。 Worldオブジェクトの一番下にある秒カウンターについて説明しましょう。

 Text { id: secondsPerGame anchors { bottom: parent.bottom left: parent.left } color: "white" font.pixelSize: 36 text: "0" Timer { interval: 1000; running: true; repeat: true onTriggered: secondsPerGame.text = parseInt(secondsPerGame.text) + 1 } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちには何が残っていますか？ 開始画面と終了画面を追加し、ゲームのロジックをわずかに修正します。 実際、これらは記事では省略できる些細なことです。 最後に、main.qmlファイルの完全な最終リストのみを提供します。

 import QtQuick 1.0 import Box2D 1.0 Image { id: screen; source: "images/bg.jpeg" width: 640 height: 360 property int bricksCount: 5 World { id: world width: screen.width height: screen.height visible: false gravity.x: 0 gravity.y: 0 Wall { id: wallLeft width: 10 anchors { bottom: parent.bottom left: parent.left leftMargin: -width top: parent.top } } Wall { id: wallRight width: 10 anchors { bottom: parent.bottom right: parent.right rightMargin: -width top: parent.top } } Wall { id: wallTop height: 10 anchors { left: parent.left right: parent.right topMargin: -height top: parent.top } } Wall { id: wallBottom height: 10 anchors { left: parent.left right: parent.right bottom: parent.bottom bottomMargin: -height } onBeginContact: { console.log(other) finishGame() } } Ball { id: ball x: parent.width/2 y: parent.height/2 } Platform { id: platform } Brick { id: brick1 x: 3; onDisappear: bricksCount-- } Brick { id: brick2 anchors { left:brick1.right leftMargin: 5 } onDisappear: bricksCount-- } Brick { id: brick3 anchors { left:brick2.right leftMargin: 5 } onDisappear: bricksCount-- } Brick { id: brick4 anchors { left:brick3.right leftMargin: 5 } onDisappear: bricksCount-- } Brick { id: brick5 anchors { left:brick4.right leftMargin: 5 } onDisappear: bricksCount-- } Text { id: secondsPerGame anchors { bottom: parent.bottom left: parent.left } color: "white" font.pixelSize: 36 text: "0" Timer { id: scoreTimer interval: 1000; running: true; repeat: true onTriggered: secondsPerGame.text = parseInt(secondsPerGame.text) + 1 } } } Item { id:screenStart anchors.fill: parent visible: false Text { id: startGame anchors.centerIn: parent color: "white" font.pixelSize: 36 text: "Start Game!" MouseArea { anchors.fill: parent onClicked: { screen.startGame() } } } } Item { id:screenFinish anchors.fill: parent visible: false Text { id: score anchors.centerIn: parent color: "white" font.pixelSize: 36 text: "Game over! Your score is: " + secondsPerGame.text } Text { id: restartGame anchors { top: score.bottom horizontalCenter: parent.horizontalCenter } color: "white" font.pixelSize: 36 text: "Restart Game!" MouseArea { anchors.fill: parent onClicked: { screen.startGame() } } } } function startGame() { screen.state = "InGame"; bricksCount = 5 brick1.show() brick2.show() brick3.show() brick4.show() brick5.show() secondsPerGame.text = "0" platform.x = screen.width/2 - platform.width/2 ball.linearVelocity.x = 0 ball.linearVelocity.y = 0 ball.active = true; ball.x = platform.x + platform.width/2 ball.y = platform.y - ball.height ball.x = screen.width/2 ball.y = screen.height/2 ball.applyLinearImpulse(Qt.point(50, 300), Qt.point(ball.x, ball.y)) scoreTimer.running = true } function finishGame(){ screen.state = "FinishScreen"; brick1.hide() brick2.hide() brick3.hide() brick4.hide() brick5.hide() ball.active = false; ball.applyLinearImpulse(Qt.point(0,0), Qt.point(ball.x, ball.y)) scoreTimer.running = false } onBricksCountChanged: { console.log(bricksCount) if (bricksCount <=2){ finishGame() } } Component.onCompleted: { startGame() } states: [ State { name: "StartScreen" PropertyChanges { target: screenStart visible: true } }, State { name: "InGame" PropertyChanges { target: world visible: true } }, State { name: "FinishScreen" PropertyChanges { target: screenFinish visible: true } } ] state: "StartScreen" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

合計で

これがデモアプリケーションです。 次に、最後に何が起こったのかを見てから、最後の数行を読んで、プラグインの開発者によって行われた作業の印象を書いてみることを提案します。 私たちは見ます：



私の意見では、うまくいきました。 実際のところ、アプリケーション自体を開発してこの記事を書くのにたった2晩（昨日と今日）しかかかりませんでした。 第一に、QMLを使用して開発を開始するためのシンプルさと非常に低いしきい値について、そして第二に、Qtフレームワーク自体とサードパーティ開発者の両方の開発者が何度も何度も同様のプラグインを作成するコードの品質について語っています。



プラス。 もちろん、Box2D自体はどのOSにも結び付けられておらず、プラットフォームに依存しないため、作成したアプリケーションはデスクトッププラットフォームとモバイルプラットフォームの両方で同様に機能することに注意してください。 この例でも、WindowsのスクリーンショットとLinuxのビデオを見ることができます。



もちろん。 この記事では、QMLに移植されたすべてのBox2D機能が考慮されたわけではなく、少なくともジョイントは残りました。 一方で、この資料は物事の本質を理解するのに十分だと思います。 そして、すでにQML / Box2Dの束のアイデアを持っているので、物理学を使用しておもちゃを簡単にリベットできます。 携帯電話の加速度計と落下キューブを使用した迷路、互いにぶつかり合って飛び去る楽しさ、X-Motoなどの車やバイクなどがあります。 この場合、忘れないでください。 QMLはC ++クラスの単なるラッパーであり、アプリケーション自体は元々C ++で書かれているかのように動作します。



通常どおり、ソースコードはプロジェクトページで収集できます： code.google.com/p/quickanoid/downloads/list



お時間をいただきありがとうございます。