QMLは単なるGUIではありません

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



ご存知のように、金曜日は仕事の週の終わりであり、楽しみとゲームに最適な時間です。 そして、最高のゲームはエキサイティングなゲームで、少し考える必要があり、友達と遊ぶことができます。 これらのゲームの1つを書くことにしました。



この投稿は、別の翻訳ではなく、さまざまなQMLハウツーおよびクイックスタートの無料プレゼンテーションでもありません。 むしろ、実際のアプリケーションを作成するときに遭遇する可能性のある落とし穴の説明です。



Qt Quick / QMLが発表されたとき、ノキアは「将来、ユーザーインターフェイスはQt Quickで記述されるだけでなく、単純なアプリケーションのロジックはすべてJavaScriptで記述されるようになり、プログラマはプロに1行のコードを書く必要がなくなります」 この声明は私の見出しよりもさらに挑発的で、すぐに興味を持ちました。プラスのコードを1行も使わずに簡単なゲームを書くことにしました。



興味をかき立てるために、私はそれを追加します：

• 私は通常、プロにコードを書きます
• JSの知識が乏しい
• インターフェースをどうやってやるのが嫌かわからない
• 私はかつて正直なQtで同じゲームを作ろうとしましたが、壊れて、QGraphicsSceneや他の興味深いクラスとのコミュニケーションに耐えることができませんでした
• 私の労働の結果はダウンロードできるだけでなく、オンラインでもプレイできます
• すべてのソースはbazaarまたはtarballからダウンロードできます。

カットの下の残りについて学びます。

バージョン1、またはドラッグアンドドロップによる戦争

出発点として、 Tsaarゲームが選択されました-2人のプレーヤーのためのボードロジックゲーム。 私はこのゲームの私の陰湿な実装が著作権者のinりを引き起こさないことを心から願っていますが、それでも私はそれを購入することに興味のある人をお勧めします-ライブ形式ではそれは私のパフォーマンスよりもはるかに興味深いです。



そして、開発に戻りました。 10分間最初に目にしたのは競技場（上図）です。すべてのまともなゲームでは、ご存知のように長方形です。 10分後、「Aha！」と言いました。写真にノードを追加して長方形のグリッドを形成し、ノードが実際に存在するかどうかを確認する関数を作成しました。



2番目の問題は写真でした。 私が言ったように、私はインターフェイスを作るのが嫌いです。そして、私が描くように、まったく考えない方が良いです。 実行時に画像を生成することは、私にはさらに愚かに思えました。 私はため息をつき、インクスケープを開き、競技場を直線で正確に描いてみました。 3行目では、結果として生成された.svgファイルをvimaで開き、マクロを使用した簡単な計算と操作により、既存の行を直線化し、不足している行を終了しました。 同様に、6つのチップイメージが作成されました。 それが、彼らが非常に曲がっており、オリジナルとは異なる理由です。



私は実存的なスローをこのように詳細にペイントし、今追加するコードをほんの少し取り入れています。これらはプロセスで遭遇した最大の問題です。 本当にそうです。 フォームにフィールドを配置し、チップを生成および配置し、自家製のボタンを作成してステータスを表示します。問題ありません！ 動くチップのアニメーション-2行！ プレーヤーが移動のフェーズに応じてさまざまなチップを移動することを許可および禁止します。これはすべてQMLで行われるため、例が記載された公式マニュアルのみを読むことができます。 作業の終わりまでに、空の行とコメントを含むすべての基本的なロジックを含むjsファイルは、173行または6つの関数を占有しました。



ああ、多分、私は私を驚かせ、松葉杖を書くことを余儀なくされた瞬間を思い出しました。 この瞬間はdrag'n'dropと呼ばれます。 はい、それは奇妙に聞こえますが、完全にグラフィカルなツールキットよりもわずかに少ないドラッグアンドドロップは不適切に行われます。 要素ではなく、その上にあるMouseAreaを「ドラッグ」できます。 できることは、使用できるボタンと、座標にどのような制限があるかを判断することだけです。 システムで作業しているとき、「彼らは私に何かを投げた」というイベントを処理することは不可能であり、特定のオブジェクトにのみ要素をスローすることはできません。 押されたイベントと解放されたイベントのみを処理できます。 必要に応じてさらに回転します。 そして、例では、私の記憶が私に役立った場合、そのような愚かなことは一般的にあらゆる種類のグリッドとリストだけで扱われ、あなたのための任意の配置された要素はありません。 どうやらこのため、「ところで、私はあなたが投げられた方法が好きではなかった、場所に戻る」という要素を伝えることは不可能です。 開発者はRSSの解析のみを考えていると言っています。



したがって、私は次のことをしなければなりませんでした。 要素のプロパティは、明らかに、画面上の座標（ xおよびy ）ではなく、ボード上の位置です。 座標は位置に基づいて計算されます。 押されたイベントとリリースされたイベントを使用して、初期位置を記憶し、どの新しいイベントをエレメントにスローしようとしたかを計算します。 その後、要素を移動する機能を呼び出します。 関数が移動が不可能であることを示している場合、要素をどうする必要がありますか？ 右、開始位置に戻ります。 手をよく見てください：

if ( (oX == nX && oY == nY) // Move to itself || board[nI] == null // or move to empty position || !canMove(oX, oY, nX, nY) // No way from the old position to the new ) { board[oI].posX = -1; board[oI].posY = -1; board[oI].posX = oX; board[oI].posY = oY; return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この割り当てから1を引いたものをご覧ください。 うん。 実際、QMLでは、プロパティに既に存在する値（oXおよびoY）を割り当てると、エンジンはプロパティが変更されていないと見なし、それに関連するすべてを再計算しません。この場合は絶対です画面上の座標。 明らかに異なる値を割り当ててから、元の値を割り当てます。

ドラッグアンドドロップの実装自体は次のようになります 。

  MouseArea { ... acceptedButtons: Qt.LeftButton // ,   MouseArea,   —  drag.target: tzaarItem //      drag.minimumX: (tzaarItem.parent.width - tzaarItem.parent.paintedWidth)/2 drag.maximumX: (tzaarItem.parent.width + tzaarItem.parent.paintedWidth)/2 drag.minimumY: (tzaarItem.parent.height - tzaarItem.parent.paintedHeight)/2 drag.maximumY: (tzaarItem.parent.height + tzaarItem.parent.paintedHeight)/2 drag.axis: Drag.XandYAxis //      "",       onPressed: { tzaarItem.z = 10; } onReleased: { //               tzaarItem.z = 1; var oldPosX = tzaarItem.posX; var oldPosY = tzaarItem.posY; var posX = tzaarItem.posXofX(tzaarItem.x); var posY = tzaarItem.posYofY(tzaarItem.y); tzaarItem.parent.movePiece(oldPosX, oldPosY, posX, posY); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これはすべての問題が本当に終わった場所です。 ゲームをプレイして、白で勝ち、黒で勝つことができます。 しかし-1台のコンピューターで。 それは退屈でした、私は友人とネットワーク上のゲームを切望しました。 そして、さらに興味深いのは、開発の2回目の繰り返しです。

バージョン2、またはネットワークが反撃します。

この時点で、3番目の問題について考え始めましたが、これまでのところまだ到達していないので、ネットワークについて説明します。



私が発見したように、QMLは非常に貧弱で悲しいネットワークサポートを持っています。 javascriptエンジンからのAjaxリクエスト（さらに、非同期のみ）があり、例にはXmlListModelがありますが、これは積極的に不規則です。 すべてのQMLがRSSフィードを簡単に解析するためだけに作成されたとは思わないでしょう。



とにかく、将来を見据えて、QMLでネットワークを操作することの貧困の最も明白な例は次の行であると言います。

  Component.onDestruction: disconnect(); // yes, it will never work, but I have to try
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要するに、ゲームを閉じるときに、サーバーに切断したメッセージを送信したいので、セッションを強制終了できます。 全体の問題は、シグナルが到着すると、非同期の ajaxリクエストを作成して 「送信」し、その後...イベントループが正常に動作し続け、通常はプログラムを終了することです-シグナルの原因はコーナーで押された十字であったためです窓。 出来上がり！ 要求が実際にサーバーに到達することはありません 。 決して。 しかし、私は試してみて、私は最高を信じています。



それまでは、これはすべて将来のことであり、現在、ネットワークとの通信と、もちろんXmlListModelの破棄のための2つのオプションを検討しています。 もちろん、インストールでQMLのみを使用していなかった場合は、ソケットを開くだけでかまいませんが、javascriptからすべてを絞り出すことにしました。

一方で、これがなければ、アプリケーションはおそらく今ほど興味深いものにはならなかっただろう。 一方、私は多くの問題を抱えていました。 これについて説明します。



XMLHttpRequestを使用することにしたとき、クライアント間の直接接続を忘れることができることにすぐに気付きました。サーバーが必要です。 サーバー自体を記述するために、QML / JSを忘れなければなりませんでしたが、それは良いことです-サーバーを「単純な」アプリケーションと呼ぶことはほとんどできません。 私はokamlaでそれを書きましたが、そのような不条理な行為の唯一の理由は、80番目のポートで世界を信頼して調べているのはOcsigenサーバーであったという事実だけです。 サーバーのロジックは非常に単純で、次の事実によって説明されています。

• サーバーは匿名ユーザーからの要求を受け入れ、それらのセッションIDを生成し、待機中のパートナーからパートナーを選択するか（理想的には1人しか存在できない）、パートナーの期待をキューに入れる
• ゲームの開始時に、チップの初期配置を生成して両方のプレーヤーに送信するのはサーバーです
• プレーヤーはチップの移動に関するメッセージを送信し、パートナーに送信されます
• 1秒ごとに1回、各プレーヤーがサーバーに新しいアクションに関する情報を要求
• 3秒以内にプレーヤーからリクエストが受信されなかった場合、プレーヤーは行方不明と見なされ、ゲームは中断します
• 可能性のあるエラー（データの誤り、対戦相手の欠落など）がプレーヤーにエラーとして送信されます。その後、クライアントは切断され、「エラーが発生しました」というugいメッセージを表示します
• クライアントはすべてのデータをGETフィールド（クエリ文字列）に送信し、回答はバイナリ形式で送信されます

誰もがサーバーコードを監視している間に、最後の項目に注目します。 JSON生成を使用してサーバー上で楽しんでいないため、またインターネットの質が悪い顧客を憂鬱にさせないために、私は絶対にばかげたプロトコルを使用してすべてのデータを送信しました。 それは私の大きな間違いでした。 応答の最初の16バイトには常にセッションID（通常のASCII文字）が含まれており、各バイトのコードは対応する値でした。 つまり、回答では、文字\ 0、\ 1などが定期的に見つかりました。 javascriptをもっとよく知っていれば、これをやらないと思いましたが、私はすでに愚かなことをしました。 判明したように、javascriptは文字列内のバイトでは機能せず、文字のみで機能します。 彼はためらうことなく印刷できない文字を消化しました。 ゼロバイトが飲み込まれ、窒息すらしません。 トラブルは、生成されたボードを送信するときに始まりました-ある時点で、セルインデックスが0x80を超え、スマートjavascriptはこのバイトを次の文字の一部と見なしました。



インターネットを駆け巡り、指示を見つけました-応答エンコードを強制的にx-custom-charsetに変更します-Qtのjsエンジンはこれを許可していないことがわかり、エンコードをサーバーで直接変更しました。 その後、既製のライブラリーBinaryReader.jsをダウンロードしました。これにより、バイト単位でテキストを読むことができ、結果を彼女にも読み取ろうとしたことが保証されました。 すべてが無駄でした-JSは頑固にバイトではなく0xffをくれました。 幸いなことに、チップに許可されているすべてのセルのインデックスは均等であることがわかりました。 送信中にそれらを半分に分割し始め、これによりデータを必要に応じて読み取ることができました。 その結果、コードは 170行の別のコンポーネントを取得し、サーバーとやり取りして本格的なネットワークゲームを楽しむことができました。最後の問題、つまり広告の直後の問題に取り組みました。

バージョン3、または突き出す場所？

その瞬間、ついに、長い間私を圧倒していた考えが形になりました。 「おい、コードをコンパイルする方法は？」と彼女は言った。 問題は関連性がありました-テスト用のすべてのコードをqtcreatorのqmlviewerで実行しましたが、もちろんこれはオプションではありません。 qmlviewerを持たない、より平凡な人々がアプリケーションにアクセスできるようにしたかったのです。 そして、サブから打撃を受けました。 qtcreatorに完全にQMLプロジェクトが存在するにもかかわらず、QMLをコンパイルすることは不可能であることが判明しました。 まさか。 ビューアーをC ++で作成し、そこからメインQMLファイルをロードする必要があります。 私の意見では、これは一般的に言えば大きな問題です。 Flashがすべてのマシンからまだ遠かったとき、Macromedia開発者は非常にトリッキーで面白いことをしたことを覚えています。swfファイルを開いたFlash Playerでは、ボタンをクリックして、すでに実行中の自給自足のexeファイルを車で。 ノキアの開発者は、さまざまなアーキテクチャとプラットフォームに合わせて調整されたこの素晴らしいアイデアを借りることを傷つけません。



まあ、最終的にはコード全体がプラスなしで機能するので、プラスにプレーヤーを置いてみましょう。 qtcreatorで別のプロジェクトを作成しました-今回は「C ++ and QML」のカテゴリから、自動生成された例を使用してどのようにコンパイルするかを見始めました。 検査の結果によると、興味深い事実が発見されました。 サンプルプロジェクトでは、QMLファイルが/ qml / tzaar /ディレクトリに追加されました。 そして、main.cppには次の行がありました。

 viewer.setMainQmlFile(QLatin1String("qml/tzaar/main.qml"));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、.proファイルには興味深い行がありました。

 # Add more folders to ship with the application, here folder_01.source = qml/tzaar folder_01.target = qml DEPLOYMENTFOLDERS = folder_01
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは多かれ少なかれ意味するものではありませんが、プログラムのインストール時に/ qml / tzaar /の内容が/ qml /にコピーされるという事実です。 捕まえた？ サンプルコードは、どこかにインストールしたい時点まで有効でした。インストール後、プレーヤーはファイルを見つけることができませんでした。 さらに、.proファイルを編集しても解決しませんでした-ソースとターゲットに同じ値を設定しようとすると、qmakeが異常になり、ファイルを自分にコピーしようとしているという事実に至りました。 この調整は明らかに私には適していない。 私はすべてのリソースをQRCに入れようとしました-それらが1つのファイルにある場合、それらは単に失われることはありません。 ここに問題があることがわかりました。新しいプロジェクトに自動的に適用されるqmlapplicationviewerクラスは、すべてのqrc：/リンクを台無しにしました。 私はすでにこのエラーを精神的に修正する準備ができていることを発見し、ゲームの説明を含むhtmlページを含むすべてのリソースをqrcに移動しました。 すべてうまくいきましたが、qtcreatorを起動するたびに、qmlapplicationviewerがそれとは異なることがわかり、すべての変更を消去しますか？

標準のqmlapplicationviewerを修正して、正しくなるようにすることができますが、 ここでは、私の例にしたい人のためのいくつかの簡単なルールを思い出させます。

• ファイルがプロジェクトのルートに対してqml / Tzaar.qmlにある場合は、 qrcでqrcとして検索する必要があります：/qml/Tzaar.qml
• QMLファイルがすべて近くにある場合は、相対パスに沿って直接読み込むことができます。例： 「Piece.qml」 -つまり、変更を加える必要はありません
• QMLから別のディレクトリにあるファイル（たとえば、qmlフォルダーではなくプロジェクトのルートにあるfield.js）をロードする場合は、 「/ field.js」と記述するだけです。つまり、アドレスの先頭にスラッシュを追加し、パスを絶対にします

この単純な手法に従って、もちろん、悪名高い「柔軟性」と、再コンパイルせずにQMLを置き換える機能を失いますが、ゲームにはそれが必要ですか？ しかし、異なるディストリビューションやシステムでは、共有データが異なるアドレスにあるという事実に悩むことはありません。 代替ソリューションのうち、次のことができます。アセンブリシステム全体をCMakeに書き換えるか、QmlApplicationViewerから.priファイルの内臓に登ります。これはさらに悪いことです。 何らかの理由で、リソースファイルを生成して複数のパスを修正する方がはるかに簡単なソリューションであるように思えます。

まとめ

QMLのインターフェイスは、私のようなインターフェイス嫌いでも、非常に迅速かつ簡単に設計されています。

QMLでは、オンラインサービスで動作するゲームまたはアプリケーションを作成できます。 隠れたレーキを慎重に回ると、シンプルさと便利さがあなたを驚かせるでしょう。

少しの欲求があれば、すべてのコードに含まれるすべてのリソースを含む1つの素敵なバイナリを作成できます。

ネットワーキングはまだ不十分です。 モバイルデバイス用のゲームの開発者（特にNFC PRなどの観点から）は、C ++レベルに到達することなくデバイス間の通常の接続を確立する機会があれば幸いです

qtcreatorの本質的な例は壊れています。 これはひどいマイナスです。 アタッチされたWorldWorld IDEが正しく動作しない場合、ライブラリ全体にひどい影を落とします。 この場合、それはQtCreatorの開発者への行き過ぎであり、技術そのものではありません。 ただし、留意してください。 おそらく、私の2.2.1以降のバージョンでは、この問題は修正されました。

XMLHttpRequestの切断された同期モードとバイト読み取りの曲がった作業から判断すると、QtのJSエンジンが一部の場所で破損していると感じました。 注意してください。

この素晴らしいゲームをプレイしたい人は、ルールを読んで（ ゲームエンジニアのロシア語版が理解しやすいかもしれません）、qmake && makeでゲームをコンパイルし、プレイできます-サーバーにも接続するパートナーが必要であることを覚えておいてください。

32ビットUbuntu 11.10のユーザー（他のシステムを約束しないかもしれません）は、 sorokdva.net / tzaar / tzaar.tar.gzのアーカイブをダウンロードし、既にアセンブルされたバイナリを開始できます。 動作するには、libqtwebkit-qmlwebkitpluginパッケージが必要です。



そして、誰かが突然私がQMLをひどくscったと思ったら、2つのポイントを思い出させます。 最初：QMLでは、合計40時間 （実際にはもっと短い時間 ）の空き時間にゲームを書きました。 第二に、従来のQtとグラフィックスを使った作業では、ゲームを書くことができませんでした。 そして、これはすでにそれを物語っています。 しかし、私は実際にはネオシレーターではありません。