Takunojiのプログラミング・プレイグラウンド(遊び場)

Javaプログラミングを基本にして、ゲーム作成に必要なことの調査結果、やったら面白そうなことなどを記載します。プログラミングのススメ的なことも記載します。プログラミングで楽しく遊ぶために色々と記載して行きます。

Qt UI部分の作成2 Label プロパティ HorizontalLayout

途中に、QSettingクラスの調査を行いましたが。。。

Qt UI部分の作成 - Takunojiの日記でやったとこの詳細です。

画面のパレット部分(赤線部分)よりLabel、Layoutをドラッグ&ドロップします。

f:id:Takunoji:20170328200746p:plain

配置した、Labelのプロパティを変更します。 → プログラムで使用するので(笑)

f:id:Takunoji:20170328200938p:plainobjectName:Object名
プログラムで使用するときのオブジェクト名を指定します。

f:id:Takunoji:20170328201531p:plain


サイズなど実際に触ってみるのが一番理解できます。

そして、「HorizontalLayout」ですが。。。したがプロパティ(設置値)

f:id:Takunoji:20170328201541p:plain

【追加方法】

f:id:Takunoji:20170328202617p:plain

f:id:Takunoji:20170328202715p:plain

f:id:Takunoji:20170328202737p:plain

Layoutの比率を「1:1:1」にする

f:id:Takunoji:20170328202640p:plain

同じ要領でListView,Widget, Buttonを追加します。

f:id:Takunoji:20170328203428p:plain

そして、全体のウィジェット(MainWindow)にレイアウトを指定します。
すると上のような感じになります。

Qtサンプル OpenGLを使用する実装

Qtデザイナーでの画面作成ができたので(作り方が大雑把に分かったくらいですが。。)

今度は、実装する内容について調べたいと思います。
サンプルを見るのが一番でしょう(笑)

Cubeを作成したサンプルです。

ヘッダファイルでいろいろとインクルードして。。。赤線部は継承
【イベント処理】マウス タイマー

【描画処理】GL初期処理 リサイズ シェーダ? テクスチャ...

一部わからないものもありましたがそんなことは日常的な事なので(笑)

それでも、プログラムなので処理は、
1「メインメソッドが動く」
2「上から下へ処理が走る」

のでそれを読んでいくだけです。。。がすべては読んでいられませんので

C++の優れているところ、「ヘッダとソースに分かれている」ことを考慮に入れて
ヘッダファイルから見ていきます。

↓ヘッダファイル

f:id:Takunoji:20170323205447p:plain

赤線部分より...
OpenGL使ってんなぁ」
protected:より
「マウス押下、マウスのボタンを離す」イベント。
OpenGLの初期化」「リサイズ」「シェーダ?」「テクスチャ」の処理があるだなぁ

CPPファイル※長いので抜粋します。
コメント書いてあるじゃん(笑)
//! [0]

void MainWidget::mousePressEvent(QMouseEvent *e)
{
    // Save mouse press position
    mousePressPosition = QVector2D(e->localPos());
}
 
void MainWidget::mouseReleaseEvent(QMouseEvent *e)
{
    // Mouse release position - mouse press position
    QVector2D diff = QVector2D(e->localPos()) - mousePressPosition;
 
    // Rotation axis is perpendicular to the mouse position difference
    // vector
    QVector3D n = QVector3D(diff.y(), diff.x(), 0.0).normalized();
 
    // Accelerate angular speed relative to the length of the mouse sweep
    qreal acc = diff.length() / 100.0;
 
    // Calculate new rotation axis as weighted sum
    rotationAxis = (rotationAxis * angularSpeed + n * acc).normalized();
 
    // Increase angular speed
    angularSpeed += acc;
}

(ヘッダファイルより)QVector2D = > mousePressPosition なので
マウスイベントを受け取りマウスのポジションを取得しているようだ。。。
のように読み進める大雑把にマウスポインタの座標計算してるなぁと認識しておく(笑)

じゃ、画面の初期表示は何をしているの?と思いました。
クラスが起動するとき、基本的にコンストラクタが起動します。
※もちろん例外もあり、コンストラクタが起動しないことも多々あります。

コンストラクタは以下のように各メンバを初期化しています。
MainWidget::MainWidget(QWidget *parent) :

    QOpenGLWidget(parent),
    geometries(0),
    texture(0),
    angularSpeed(0)
{
}

とりあえず、QOpenGLWidgetがわかりませんなぁ(笑)
じゃ調べよう※上のリンクにドキュメントがあるのでそれで調べました。
ははぁ「initializeGL()」をオーバーライドしているのね。。。

「QOpenGLWidgetクラスが起動するときにinitializeGL()が呼ばれますので
このメソッドに初期化処理を記述してくださいよ」という設計になっているようだ。
(・_・D フムフムちょいとわかってたかな?

次回は、その中身を理解していきたいと思います。

C++ DB アクセス フレームワーク

表題のフレームワークを探して見ると「QxOrm」がありました。
Qtをインストールする必要があるみたいですが。。。丁度Qtで作ろうとしていたので良し⭐︎

毎度のことながら、英語のサイトしか見つからず(探してもいませんが(笑))
まぁインストールして使用しましょうとなりました。

なんでも、Javaで使用するHibernate (このサイトがわかりやすいかも?)
->  XMLでDB接続情報などを読み込みNoSQLでの実装を可能にするフレームワーク 

拙い英語力で読んで見ると、JPAの様なことやってくれるみたい

Java Persistence API - Wikipedia

本当は、JPAみたいな処理を作成するか?などと考えていましたが。。。
ちょいと、QxOrmを使ってから考えようと思います
実際には、アノテーションの実装がC++では可能な様に思えるのです。
まだ、C++は1ヶ月ちょいほどの経験しかなく。。。力及ばず(笑)

とにかく下の図の様に

f:id:Takunoji:20170317231146p:plain

アプリ名→アプリケーションの詳細情報→アプリが使用するスキーマの指定
をDBの設定で変更できる様にしたい。
つまり、新規でアプリを作成する→DBスキーマを追加と新規部分を作成する

。。。とできるだけ少ない工数でアプリケーションの追加を行える様にしたい。



Windows 10 Iot core セットアップ

Qtのセットアップなどをやってきましたが、
最終的には、ラズパイにインストールして起動しようと思ってます。
【問題】
Linuxベースの「ラズビアン」だと、
デプロイ(作成したアプリをラズビアンにインストール)するときには
ラズビアンでビルド(コンパイル~リソースファイルの配置までを行う事を)
しないといけません。

【対応策】
いろいろと考えた結果、「WindowsOSならビルドした起動ファイルをそのままインストールすればいいんじゃね?」となりました。

Windows 10 Iot Coreのインストール】※英語でした。。。
1.使用するハードウェア(今回はRaspberry Pi 2)を選択
※下にGitもあるので参考に見てみるのもアリ☆

f:id:Takunoji:20170325101539p:plain

2.SDカードでインストールかNOOBSでインストールするか。

f:id:Takunoji:20170325101509p:plain

3.➀Windows10の(2015年頃リリースバージョン)以降のOSでやってください
  ②ダッシュボードを利用する場合にインストールしてください
  ※上記のように解釈しました。間違ってたらごめんなさい。。。
  →結局、ダッシュボードは必要でした(笑)インストールします

f:id:Takunoji:20170325101938p:plain

「Download Dashbord」をクリックして「setup.exe」をダウンロードします。

f:id:Takunoji:20170325104005p:plain

「インストール」をクリックするといストール処理が走ります。(5~10分)

f:id:Takunoji:20170325104044p:plain

そして、ダッシュボードが起動します。

f:id:Takunoji:20170325105102p:plain

今回使用するデバイスは「Raspberry Pi 2」、OSはWindows Iot Core(ver14393.953)
OSのバージョンはコマンドプロンプトを開き、「>winver」コマンドで確認できます。

f:id:Takunoji:20170325105605p:plainコマンドを叩くと↓

f:id:Takunoji:20170325105803p:plain

細かい入力をしてインストール
※今回はLAN(有線)でインターネットに接続してます。

f:id:Takunoji:20170325110458p:plain

インストールが終わったら、今度はインストールしたSDカードをラズパイにさして起動します。
次回はラズパイを起動します。

Qt QSettings 使い方

前回に引き続き、QSettingsクラスの使い方を調べます。
※リファレンスを参照しました。

【基本的な使い方】※PROファイルに「QT += core」が記載されている事
・QSettingsを使う時には、会社名、ドメイン名、プラットホーム名などの設定
・画面タイプの設定。
CSSと同様に背景色...
と設定するようだ。設定に使用した値などをKey=Valueで保持する、
QtのExamples\Qt-5.6\widgets\tools\settingseditor\inifilesにあるファイル

f:id:Takunoji:20170323220623p:plain

のように各設定値を保持するようだ。取得、設定(保存)はリファレンスに書いてあるのでそちらを参照されたし。

使えないこともないが、考えていることと少し違うので他のクラスを調査する。

 

Qt 設定ファイルの読み込み

前回は、Javaでのファイル読み込みを試しに実装してみました。
今度は、Qtでの設定ファイル読み込みを実装したいと思います。。。が
何を設定するのか?そこをクリアにしたいと思います。
Qtリファレンスによると・・・以下の項目を設定するようです(一部)
・アプリケーション名
・ファイル名
・フォーマット
・表示タイプ...
ここら辺は調査します

↓自動作成されたソースに、赤線部分を追加しています。
【PROファイル】

f:id:Takunoji:20170322205243p:plain


【ヘッダファイル】

f:id:Takunoji:20170322203429p:plain
【ソースファイル】

f:id:Takunoji:20170322203446p:plain

これだけでイケるようです。詳細部分については次回。。。

File読込 Javaでやる場合

汎用画面APを作成するにあたりQt開発環境ができたので、設計に戻ります。
とにもかくにもファイル読み込みが必要なのでまずはJavaでのファイル読み込み

1.準備
プロジェクトにビルドパス(リソースフォルダ)を追加
【プロジェクトを右クリック→ビルドパスを追加】

f:id:Takunoji:20170321223013p:plain
2.コーディング

f:id:Takunoji:20170321223230p:plain

※ソース(eclipseプロジェクトは、ここにアップしてあります)

まぁINPUTにファイルパス(ファイル名も)、出力にファイルの内容・・・
そんな感じで実装になる。

ファイルから読んだデータをクラスオブジェクトもしくは、コンテキストに保存したい
【ファイルリード】→【コンテキストに設定】→【フィールド(メンバ変数)に保存】
のような処理順序になる。
C++での実装も同様になるが、FileReaderクラスなど標準ライブラリにあるのか?
調べますか。。。

Qt UI部分の作成

スムーズに作業が進むことに幸せを感じています(笑)

今度は、UI部分の作成に入ります。
まとめると下の図のようになります。

f:id:Takunoji:20170320202347p:plain

実際の手順に関しては、動画とりました。
UI部分は、実際にいじってみるのとデザインをちゃんと考えないといかんですな(笑)

youtu.be

次回は、ファイル読み込みについてJavaで実装してみます。

Hello Qt やっと開発です。

長かった(実質3日)環境構築も終わり、実装に入ります。

やっぱり、「ハローワールド」ならぬ・・・Qt版で実装します。

 

早速、QtCreatorを起動します。

f:id:Takunoji:20170320155032p:plain

プロジェクトの作成時に、Qtのソースにアクセスしやすいようにプロジェクトを作成します。(ディレクトリの場所を相対パスでしていしますので。。。)

f:id:Takunoji:20170320155225p:plain

プロジェクト作成時にフォームを作成するにチェックを入れてください。
出ないとすべてコードで画面を作成することになります。
※それはそれでよいと思います。

JavaFx(自分の時代はJavaSwing)などでの画面作成になるとコードで画面の作成を行います。
public class JavaFxTest  extends Application {
    @Override
    public void start(Stage stage) {
         stage.add(ラベル。。。);
                        ・

                        ・  
}

といった感じのコードになると思います。※何も見ないで書きましたので注意

そして、画面とりあえずは、.proファイルをみて
以下のように、QT += widgetsがついているか確認してください。
自分は、いきなりハマりました。

f:id:Takunoji:20170320155843p:plain

そして、コードは何も書きませんでした。実行結果などは↓参照です。

m.youtube.com

QtCreator 動かない 解決☆

人生というのは、いろいろと躓きながら進むものなんですねぇ。。。
ついにQt開発環境のセットアップが完了しました。
失敗1失敗2失敗3失敗4

手順としてはQtCreatorのセットアップの続きになります。

必要なインストール

1.MinGw

2.nmake(VisualStudio)

3.QtCreator
そして、Visual Studioに入っている「nmake.exe」

MinGwの「gcc, g++」を環境変数(PATH)に設定
※nmakeのありかはVisual Studioフォルダ以下を検索してください
→コマンドでどこでも実行できるように設定します。eclipseの設定でもやります。
足りなかったのは「MinGwをインストールする時のbin, dllなど」でした。
具体的には、下のインストーラーから「GNU・・・」と書いてあるものを
インストールしないとコンパイラの設定が「ダメよ」と怒られる。

f:id:Takunoji:20170320001728p:plain

どれが必要なのかわからなかったので、GNUとついているものはすべてダウンロード
しました。

Qtの設定情報は以下の通りになりました(自動検出のみ)

f:id:Takunoji:20170320002819p:plain

f:id:Takunoji:20170320002835p:plain

f:id:Takunoji:20170320002849p:plain

f:id:Takunoji:20170320002907p:plain

f:id:Takunoji:20170320002929p:plain

そして、サンプルの起動結果
※「clock」を起動しました。

f:id:Takunoji:20170320002951p:plain

苦節3日・・・これで開発ができる(^◇^)
次回は、Qtアプリを起動するラズパイのセットアップを行います。