searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

cancel
プロフィール PROFILE

ITechProgramさんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
ITechProgram
ブログURL
http://itech-program.com
ブログ紹介文
主にJavaやJavaFXに関する記事を投稿しています! ゲームの作り方もブログ内で紹介してます!
更新頻度(1年)

集計中

ブログ村参加:2018/12/02

本日のランキング(IN)
読者になる

新機能の「ブログリーダー」を活用して、ITechProgramさんの読者になりませんか?

ハンドル名
ITechProgramさん
ブログタイトル
ITechProgram
更新頻度
集計中
読者になる
ITechProgram

ITechProgramさんの新着記事

1件〜30件

  • 【OpenCV】3つの擬似濃淡変換(ディザリング)の解説【Python】

    擬似濃淡変換(ディザリング)とは 様々な画像処理の中に、擬似濃淡変換(以下ディザリング)というものがあります。 このディザリングは2値を扱うという特徴があり、「0」と「255」の2つの値しか扱いません。こういった画像は、2値画像といいます。 基本的な2値画像は例えばこういったものです。 こうすることによって、データ量を少なくすることができますが、やはり「0」と「255」しかないということで、画像のなめらかさは失われています。 そこで、ディザリングを使って、基本的な2値画像では再現できない画像のなめらかさを、少し複雑なアルゴリズム(仕組み)によって再現してあげます。 今回は普通の2値画像の紹介も含めて、3つの有名なディザリングを紹介していきたいと思います。 そして今回しようする画像はオープンソースの画像で、先ほど2値化された状態で紹介しましたが、こちらになります。 ファイル名は「lena.jpg」にしました。 もはやお馴染みですね。 普通の2値画像 まずは2値化する際に、ソース画像をグレースケール化してカラーチャンネルを1つにします。 次に、閾値(しきいち)を定める必要がありますが、一般的には閾値を「128」にするので、「128」に設定します。これは、「0」と「255」の中間の値です。 そして、画素値がこの閾値未満なら「0」に、以上なら「255」に変換してあげます。 [crayon-5c3864e72db46233914038/] 結果 先ほども言いましたが、やはりなめらかさが欠けていますね。 ここからは、ディザリングを行なっていき、なめらかさを再現していきます。 ランダムディザリング ランダムディザリングでは、閾値(しきいち)を乱数で生成します。その他は同じ方法です。 [crayon-5c3864e72db52636115205/] 結果 先ほどの2値画像よりかなり見栄えが良くなりました。 ノイズの向こうに綺麗な画像がありそうな感じを受けます。 誤差拡散ディザリング 誤差拡散ディザリングでは、2値化した際に生じる誤差を次の画素値に反映させます。 [crayon-5c3864e72db57478724706/] 結果 ランダムディザリングよりさらになめらかになり、より画像の詳細な情報を知ることができるようになりました。 組織的ディザリング

  • 【保守性とは】Javaで「private」を使うメリット

    保守性のあるプログラム [crayon-5c35c1e8e1a3b834980109/] 結果 [crayon-5c35c1e8e1a43124350462/] このプログラムでは、「Test」クラスの変数「_x、_y」(初期値0)に値を設定することで、割り算結果を得ることができます。 「Main」クラスでは、その「Test」クラスをインスタンス化した後、「_x、_y」の値を設定し、割り算結果を得ています。 保守性のないプログラム 次は、保守性ないプログラムを記述していきます。 つまり、先ほどの「_x、_y」を「public」にして、「set」関数も無くします。 [crayon-5c35c1e8e1a46940526850/] 一見先ほどのプログラムより行数も減って、よくなったと思うかもしれませんが、これが落とし穴になります。 その2つの例を順に見ていきましょう。 変数名を変更した時の落とし穴 ではここで、「Test」クラスの「x、y」変数の名前を変えてみます。 「x、y」ではなく、「div1、div2」にしてみたいと思います。 [crayon-5c35c1e8e1a49281905410/] この状態でコンパイルすると、以下のようなエラーが発生しました。 [crayon-5c35c1e8e1a4b010006859/] 内容を確認すると、「Main」クラス内で存在しない変数を扱っていると言います。 具体的には、「x、y」の名前のまま使ってしまっているということです。 なので「Main」クラス内のプログラムも変更する必要があります。 [crayon-5c35c1e8e1a4e098556084/] これでエラーはなくなりましたが、余計な作業を生み出してしまいました。 これがもし保守性のあるプログラムで書かれていたら、「Main」クラス内で変数名を修正することはありませんでした。 今回の例では修正する箇所が少なくて済みましたが、もし大きい規模のプログラムで同じことをやってしまったらどうなるでしょうか。 これが1つ目の落とし穴です。 割り算での落とし穴 次に、割り算をする際に「0」で割ってみたいと思います。 具体的には、「div2」の値を「0」にします。 [crayon

  • 【OpenCV】ヒストグラムを作って画像の特徴を知る方法【Python】

    ヒストグラムとは ヒストグラムは、画像内の画素値の度数分布を表したもので、画像の大まかな特徴や偏りを調べるためのものです。 例えばこの画像 出典: このように雲や空などが大部分を占める明るい画像だと、ヒストグラムはこのようになります。 左から右に、0〜255となっていくのですが、このヒストグラムを見ると255に近い画素値がかなり多いことがわかります。 逆に暗い画像だと、左(0に近い方向)に山が集中します。 こういった風に画像の特徴を知ることができる、それがヒストグラムです。 OpenCVでヒストグラムを作る プログラム(Python) 使用する画像 [crayon-5c34705d1843b455634456/] 結果 解説 ヒストグラムを作成する際は、画像として作成するので、まず最初に画像配列を作成します。 画像配列は「numpy.ndarray」型となるので、「numpy」の「zeros」関数で、初期値「0」の画像配列を作成します。 次に、「calcHist」関数を使って度数分布を求めていきます。 第1引数: ソース画像配列。「[]」で括ることによって、画像配列データとして認識させる。 具体的には、「numpy.ndarray」型から「list」型へ変換する。 第2引数: チャンネルの種類。[0]なら青、[1]なら緑、[2]なら赤を調べる。 ソース画像がグレースケールなら[0]を指定する。 第3引数: マスク画像。マスク画像を指定しない場合は、「None」を指定する。 第4引数: ビン(階級)の数。今回は全画素値を調べるので、[256]を指定。 第5引数: 計測する画素値の範囲。今回は全画素値を調べるので、[0, 256]を指定。 「calcHist」関数で返ってくる値は「numpy.ndarray」型で、256個の配列の中に各画素値の度数が代入されています。 ヒストグラムが取得できたら、描画に移ります。 今回は「line」関数で縦線を256本描画して、棒グラフを作成していきます。 「line」関数の引数には、描画対象となる画像と、始点・終点、そして線の色が入ります。 青・緑・赤チャンネルのヒストグラムを作成

  • Javaのクラスとインスタンスが絶対にわかる3つのポイント

    クラスとは Javaで作られるアプリケーションは、クラスという部品が集まってできています。 例えば、「Button」クラスや「Label」クラスなどがわかりやすいと思います。 ボタンに関する処理は「Button」クラスで、ラベルに関する処理は「Label」クラスで行う、といった風に、それぞれに役割がある場合にクラス単位で処理を分けます。 クラスのインスタンス クラスを定義した段階では、クラスを実体化していません。 このように、クラスを宣言した段階では「あるだけ」の状態です。 ここから「車」を作るためには「実体化」する必要があります。 その「実体化」がインスタンス化ということです。 メモリには当然限りがあります。 なので、メモリ領域を使う情報の中で、無駄なものがあると困ります。 そこで、必要なものだけを実体化します。 そうすることによってメモリの節約ができるのです。 また、この考え方はプログラミングにおいてとても重要なので、なるべくメモリの無駄遣いをしないようなプログラミングを心がけるのが良いです。 スタティックなもの スタティックな変数や関数は、「汎用的なもの」に対して宣言されることが多いです。 例えば「KeyEvent」というクラス。 このクラスには様々なスタティック変数が定義されています。 「VK_RIGHT」や「VK_LEFT」、「VK_UP」に「VK_DOWN」などなど。 これらはキーコードの値を示しています。 こういった汎用的なものは、わざわざインスタンス化する必要がないため、スタティックとして定義されています。 まとめ ・インスタンス化は、「汎用的」な意味をもつ「車」や「人」などを実体化させる行為。 ・インスタンス変数・関数には、「車の名称」や「人の名前」などの、具体的な情報が割り当てられる。また、こういった変数・関数は、動的なものと呼ばれる。

  • 【入門シリーズ】JavaゲームプログラミングPart17

    前回 http://itech-program.com/?p=896   今回からいよいよゲーム制作に入っていきます。 ゲームはシューティングゲームを作っていきます。...

  • 【OpenCV】ルックアップテーブルを用いた階調変換【Python】

    [mathjax] ルックアップテーブルとは 例えば、ネガポジ転換と呼ばれる手法では、 \(f(x) = 255 - x\) この式をルックアップテーブルにセットし、ソース画像のすべて...

  • 【入門シリーズ】JavaゲームプログラミングPart16

    前回 http://itech-program.com/?p=874   CSSで装飾 JavaFXでは、コントロールをCSSで装飾することが可能です。 今回は、プログ...

  • 【入門シリーズ】JavaゲームプログラミングPart15

    前回 http://itech-program.com/?p=678 前回までで、図形や画像を描画してきましたが、今回はJavaFXの「コントロール」という機能を使って、「ボタン」や「ラベ...

  • 【Java】コマンドプロンプト・ターミナルがフィールドの、STGを作ろうPart1

    作るものの紹介   作る前に、まずどんなものを作っていくのかを把握しておく必要があるので、以下の動画をご覧ください。   [video width='1920'...

  • JavFXでかんたん風船アクションを作ろうPart2

    〜プレイヤー(風船)の操作〜

  • 【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart3【最終回】

    前回Part タイトル画面の作成 前回までで、ゲームの基本が完成しました。 ここからはゲームの仕上げに入っていきます。 そこでまず必要なのが「タイトル画面」です。 プログラムを実行した時に、まず初めにタイトル画面が出てきて、そこで「はじめる」を選択するとゲームが開始する。 ゲームオーバーしたらスコアの結果が表示されて、何かキーを押すとタイトル画面に戻る。 今回はタイトル画面はもちろん、こういった画面遷移処理のやり方も一緒に紹介していきます。 まずはタイトル画面のイメージ(構想)です。 もちろんまだ足りない部分はありますが、おおまかにはこれを目指していきます。 タイトル画面を表示する [crayon-5c2891956d967220303511/] まず、「enum」というキーワードが新たに出てきました。 この「enum」というのは、列挙型を定義する際にしようします。 今回のように「Title」「Game」「Result」と、3つの画面の種類を「列挙」しています。 絶対に「enum」を使わないといけない理由はないのですが、「enum」にした方が見やすいというのは言えると思います。 それから文章の記述量も少ないので楽です。 [crayon-5c2891956d975503371822/] 確かに個人差はあると思いますが、私は「enum」の方が見やすいです。 それから「初心者」の方はこれを機に「enum」を学べると思いますので、「enum」の使用をおすすめします。 では、「enum」の使い方ですが、「enum」で列挙型を定義したら「列挙型の変数」を作成します。 [crayon-5c2891956d978693837293/] 列挙「型」ですので、列挙型の変数が作れます。 そしてこの変数の使い方ですが、若干間違えやすいポイントがありますので、しっかり確認していきます。 [crayon-5c2891956d97a317773734/] switch文の中のcase文で「Screen.」と書いてしまいがちですが、case文では「Screen.」は必要ないので注意しましょう。 「enum」の解説はこれで以上です。 その上でプログラムを見てみましょう。

  • 【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart2

    前回のPart 障害物の処理 前回まででプレイヤーの基本操作が完了しました。 今回は障害物の処理を書いていきます。 Obstacleクラスを作る 「Obstacle.java」というファイルを作り、そこに「Obstacle」クラスを定義していきます。 ちなみに「Obstacle」は「障害物」の意味で、今回作る障害物は矩形です。 では「Obstacle」の持つ基本情報をまとめてみます。 では、実際に実装をしていきます。 [crayon-5c289199391b2578437184/] Obstacleクラスの関数を定義する 次は、障害物を生成し、描画するところまで実装していきます。 障害物の生成に関しては、今回は簡略化し、まず先に「Obstacle」クラスが機能するかを確かめていきます。 [crayon-5c289199391bc495347550/] [crayon-5c289199391bf516775319/] 結果: 赤い矩形が描画されていたら成功です。 障害物にランダムな値を設定する これで「Obstacle」関数が機能したわけなので、障害物にランダムな値を設定していきます。 さらに、障害物の生成にも工夫を加えていきたいと思います。 まずランダムな値ですが、障害物がどこから出てくるのか(Y座標)、障害物の形はどうなのか(幅・高さ)、障害物の色は何色か、障害物の速度(X方向の速度)はいくらか。 これらに関してはランダムな値を設定することにします。 ゲーム性が増しますからね! [crayon-5c289199391c4926673412/] Y座標や幅・高さなどの式が少し複雑に見えるかもしれませんが、以下の画像を参考に好みで調整してみてください。 色を決定するには、「赤・緑・青」の成分の値をそれぞれ設定する必要があります。 ちなみに、色の合成は光の3原色ですのでご注意を。 そして「move」関数内での更新処理ですが、「x -= vx」となっています。

  • 【シリーズ】JavaFXでかんたん風船アクションゲームを作るPart1

    今回は、シリーズ「JavaFXでかんたん風船アクションゲームを作る」の第1回目です。 このシリーズでどういったゲームを目指しているかは、こちらの動画を是非ご覧になってください!! 1000点は意外と厳しい感じです。 私が下手なだけかもしれませんが・・・。 プログラムの骨格を作る ウィンドウを表示する [crayon-5c2891998d8f2877026148/] 結果: ダーク・タコイズ色のウィンドウが出てきました。 ダーク・タコイズにした理由は、空の色に似ているからというだけなので、色はご自身の好みでどうぞ。 さてウィンドウの作成ですが、「JavaFX」では「Stage」クラスというのを用います。 この「Stage」がウィンドウのことで、その上に「Scene」を乗せます。 「Scene」にはボタンやラベル、その他様々なノードを乗せることができ、 以下で説明する「Canvas」ももちろん乗せることができます。 「Stage」にその「Scene」を乗せるには「setScene」関数を用います。 この関数の引数は「Scene」型なので、作成した「Scene」を代入しましょう。 最後にウィンドウの表示ですが、これは「show」関数を呼び出すだけです。 行数があまりかからないのでいいですね。 Canvasをセットする 次は「Canvas」をセットします。 この「Canvas」に風船(プレイヤー)や障害物などを描画していきます。 [crayon-5c2891998d8fd057585594/] 結果に変化はありませんが、これで「Canvas」をセットできました。 「Canvas」をインスタンス化するところですが、引数は「Canvas」の幅・高さです。 今回はウィンドウ目一杯を「Canvas」にしたいのでウィンドウサイズと同じにします。 そして「GraphicsContext」を取得するところですが、この「GraphicsContext」というのは「Canvas」に様々なものを描画する際に役立ちます。というより、これを使わなければ描画はできません。 そしたら最後に、その「GraphicsContext」を使ってなにかを描画してみましょう。 円と矩形を描画する

  • 【シリーズ】JavaFXで電卓を作ろう!!Part2【最終回】

    前のPart 数字を電卓に表示させる 全てのボタンをリンクさせる 前回ボタンをリンクさせる方法を紹介しました。 なので今回、全てのボタンをリンクさせていきます。 [crayon-5c289199e78a7580038441/] このように全ての変数を宣言しました。 あとは「main.fxml」に、変数と「onClick」関数をリンクをさせていきます。 ここからはなかなかしんどい作業ですが、時間がない人はこちらをどうぞ。 (リンク作業が完了しているファイル) ボタンによる操作を記述する ここからは「onClick」関数を編集し、ボタンを押した時に数字が表示されるようにしていきます。 「1」ボタンが押されたら「1」を表示する。 そのあとに「3」ボタンが押されたら、「13」と表示する。 こういったプログラムを組んでいきます。 そのためには、何のボタンが押されたのかを知る必要があります。 そこで「onClick」関数の引数に注目です。 「onClick」関数の引数は「ActionEvent」型です。 そう、つまりこの「ActionEvent」クラスの関数を使えばどのボタンが押されたのかを知ることができるんです。 [crayon-5c289199e78b1736698587/] 「getSource」関数です。この関数を使えばどのボタンが押されたのかを知ることができます。 「getSource」関数でボタンの情報を取得し、「equals」関数で判別を行います。 このプログラムを実行したときに、 [crayon-5c289199e78b3373338232/] このように表示されれば成功です。 これを利用して数字を「TextField」に表示するプログラムを書いていきます。 [crayon-5c289199e78b4219896819/] 「TextField」に表示する文字列を保存するための変数「str」の語尾に数字を入れていきます。 こうすることでボタンによる数字の入力を実現することができます。 あとはこれを「0〜9」まで書いていきましょう。 [crayon-5c289199e78b6004089304/] 電卓で計算をする

  • 【シリーズ】JavaFXで電卓を作ろう!!Part1

    今回からシリーズ「JavaFXで電卓を作ろう!!」をやっていきます。 JavaFXによる電卓の作り方を知れば、JavaFX自体もよく知ることができます。 JavaFX Scene Builder 2.0を導入しよう! JavaFXでレイアウトを作る上において、JavaFX Scene Builder 2.0は絶対に必要です。 以下のURLからダウンロードしてください。 バージョンは2.0なので、間違えないようにしてください! 上の画像をよくみて、間違えないようにしてください。 ダウンロードできたら、インストールしてください。 インストールが完了したらJavaFX Scene Builder 2.0を開きましょう! レイアウトの作成 これが完成図です。 これを目指して作っていきます。 AnchorPaneを用意する まず「AnchorPane」を用意します。 これは、電卓のボタンやテキストフィールド(答えを表示する場所)を貼り付けるための土台です。 このように、「AnchorPane」をドラッグして貼り付けてください。 土台ができたらボタンの貼り付けに移ります。 ボタンを貼り付ける ボタンは「Controls」にあります。 このボタンも、先ほどと同様にドラッグして貼り付けます。 そしたら、「Button」という文字が表示されている状態なので、「1」や「2」などの数字に変えていきましょう。 それから、ボタンのサイズも変更していきましょう。 ボタンの文字を変更するには、ボタンをダブルクリックして、直に書き込むやりかたと、「Properties」の「Text」欄を変更するやりかたの二つがあります。 まずはダブルクリックのやり方です。 ダブルクリックすると、文字が編集可能になります。 次に、「Properties」からの変更です。 矢印で指した場所から変更が可能です。 ちなみに、「Properties」からフォントや文字の大きさも変えられるので覚えておきましょう。 ボタンのサイズを変更する ボタンのサイズ変更は直感的に出来ます。

  • JavaFXでWebブラウザを作る!!【解説】

    JavaFXで「Webブラウザ」を作っていきます! 「Webブラウザ」でも、JavaFXなら特別な知識はいらず、簡単に作れてしまいます。 まずは完成品を紹介します。 「戻る」「進む」ボタンに、「URL指定欄」、「リロード」ボタン、そしてページを表示する領域があります。 これから、この完成品を目指してプログラムを書いていきます。 WebViewを表示する JavaFXでは、「WebView」というクラスが用意されているので、まずは「Stage」にこれを貼り付けていきます。 [crayon-5c289197a669c754814945/] これで「WebView」を貼り付けることができましたが、実行してみると真っ白な画面が出てくるだけです。 これは、どのページを表示するかが指定されていないのが原因なので、ページのURLを指定してあげる必要があります。 そういった処理をするには、「WebEngine」というクラスを用います。 WebEngineでページを指定する [crayon-5c289197a66a5775467888/] 「WebEngine」のインスタンスを取得するには、先ほど作成した「WebView」のインスタンスから、「getEngine」という関数を使って取得し、ページの読み込みは「WebEngine」クラスの「load」関数を使い、引数にURLを指定します。 さぁそして、実行した結果はどうでしょうか。Googleの検索ページが表示されて、既にらしくなってきましたよね。 URLをブラウザから指定する 「WebEngine」クラスの「load」関数にURLを指定するだけでWebページが表示されました。 ということは、テキスト領域を用意して、入力された値を「load」関数の引数にすれば、ブラウザからURLを指定することが可能になりそうです。 というわけで、「TextField」クラスを使って実現してみます。 [crayon-5c289197a66a8844931298/] まずは上のバーを設置し、テキスト領域を貼り付けます。 そして「WebView」の位置も少し下げました。 これでテキスト領域を設置は完了しました。

  • 【JavaFX】画像処理で覚えておきたいこと2選

    1.普通の画像表示 画像を表示するには、「Image」クラスで画像を読み込み、「ImageView」クラスで表示をします。 今回使用する画像はこちらです。 フリー画像出典ですので、ご自由にお使いください! [crayon-5c2891967f031703941818/] 実行結果: しっかり画像が表示されていたら成功です。 2.切り取った画像を表示 画像を表示する際は「Image」クラスを使って表示しなくてはいけません。 しかし、「Image」クラスでは画像の切り取り作業はできないので、今回は「BufferedImage」クラスの機能を使って、画像を切り取っていきます。 そして出来上がった「BufferedImage」は、「SwingFXUtils」クラスの「toFXImage」関数を使って「Image」クラスに変換します。 [crayon-5c2891967f03c033571480/] 結果: 切り取られた画像が表示されていれば成功です。

  • 【入門シリーズ】JavaゲームプログラミングPart16〜イベントの追加〜

    前回 前回「コントロール」というものを追加し、「ボタン」や「ラベル」、「テキスト領域」を表示させました。 しかしこれらにはまだ「機能」が備わっていません。 前回作った「ボタン」を押した時に、なにか起こりましたか? 起こりませんでしたよね。 なので今回は、「コントロール」をいじったら何か起こるように「イベント」というものを追加していきたいと思います。 ボタンにイベントを追加する では、「ボタン」を押したらコンソールに「押されました!」と表示させてみます。 [crayon-5c29e33e631d8481129391/] イベントを追加するには、「setOnMouseClicked」関数を用います。 もちろん「マウスイベント」に限らず、「キーイベント」や「マウスドラッグイベント」などもあり、それぞれ「setOnKeyPressed」関数や、「setOnMouseDragged」関数などがあります。 そして引数になにやら見慣れない記述がありますね。 これは「ラムダ式」というものなのですが、今はこれを知る必要はありません。 ラベルにイベントを追加する 対象が「ラベル」になってもやることは変わりませんが、今度は押されたら「ラベル」の文字列を変更してみたいと思います。 [crayon-5c29e33e631e5416846885/] 押すと「Hello!!」が「Clicked!!」に変わりました。 こういった使い方もできるので、イベントの追加だけでかなり幅が広がったはずです。 次に「テキスト領域」と「ボタン」を使った、イベントの応用を紹介します。 応用 イベントを追加する対象はボタンです。 [crayon-5c29e33e631eb276015474/] 結果: ボタンを押すと、テキスト領域に書かれた文字をすべて「大文字」に変換してくれます。 他にも色々なことができるので、イベント処理を自分なりにカスタマイズしてみると面白いと思います! 次回→12月30日

  • 【入門シリーズ】JavaゲームプログラミングPart15〜コントロールの追加〜

    前回 前回までで、図形や画像を描画してきましたが、今回はJavaFXの「コントロール」という機能を使って、「ボタン」や「ラベル」を追加していきます。 ボタンの追加 まずはボタンを追加してみたいと思います。 [crayon-5c273ffc8323a932162293/] 「ボタン」は「Button」クラスというその名の通りのクラスがあるので、これを使います。 そして、X・Y座様は「setLayoutX・Y」関数を使って設定することができます。 ラベル(文字列)の追加 JavaFXでは「ラベル」を用いて文字列を表示することが出来ます。 X・Y座標の設定は「ボタン」と同様で、「setLayout」関数を使います。 [crayon-5c273ffc83247557191804/] 実行すると、小さく「Hello!!」と表示されます。 これだとかなり見辛いので、フォント・フォントサイズ・色を指定します。 フォントの設定等は「Font」クラスを使って行います。 [crayon-5c273ffc8324b231739345/] 「Font」クラスのコンストラクタには「フォント名」と「フォントサイズ」が入ります。 ちなみに「フォントサイズ」は「double」型という型なので、小数を入れることもできます。 そして色は「Label」クラスの「setTextFill」関数で設定することができます。 今回は「Arial Black」というフォントを使用しましたが、お好きなフォントがあればそれを使っても構いません。 フォントの種類がよくわからない方は、以下の表をみて、どんなフォントがあるのか確認してみてください。 もちろんこれだけではないのですが、書ききれないので5つだけ紹介しました。 テキスト領域 今度は「TextArea」というクラスを使って、「テキスト領域」を作っていきます。 プログラムの流れは今までと同じです。 [crayon-5c273ffc8324f681303013/]

  • 【入門シリーズ】JavaゲームプログラミングPart14〜画像を描画〜

    前回 前回図形を描画しましたが、今回は「画像」を描画していきます。 そしてそのために使う画像は「lena.jpg」です。 画像を描画する 画像を読み込むには、「Image」クラスをインスタンス化します。 「Image」クラスのコンストラクタの引数には、「ファイル名(正確にはファイルの相対パス)」が入ります。 そして描画は、図形描画でも使った「GraphicsContext」クラスの、「drawImage」関数を使います。 引数には「Image」型のオブジェクトと、X・Y座標です。 ちなみにX・Y座標は画像の左上座標です。 [crayon-5c249cdf5e461933840505/] 結果: たったこれだけなので、非常に簡単です。 切り取り画像の表示 次は、画像の1部分だけを描画してみたいと思います。 画像を切り取るには、「BufferedImage」クラスの「getSubimage」関数を使います。 少しややこしいプログラムになるので、まずはプログラムからさっと紹介します。 [crayon-5c249cdf5e469017194250/] まず、BufferedImageに読み込んだ画像の情報が入ります。 入れ方は、「ImageIO」クラスの「read」関数を使い、引数に「File」型を入れます。 今回は「File」クラスのコンストラクタの引数に「lena.jpg」と書きました。 次に、「BufferedImage」クラスの「getSubimage」関数で切り取り画像を生成し、「buffer」に代入します。 「getSubimage」の引数には「X・Y座標」と「幅・高さ」が入ります。 次に、「BufferedImage」を「Image」型に変換します。 ちなみになぜか変換が必要かというと、「drawImage」関数の1つめの引数が「Image」型だからです。 もし「BufferedImage」型の「buffer」を入れてしまうと、「型違い」が起きてエラーになってしまい、描画ができません。

  • 【入門シリーズ】JavaゲームプログラミングPart13〜図形の描画〜

    前回 JavaFXには様々な機能があります。 その中でも今回は、図形の描画を行なっていきたいと思います。 準備(Canvasの追加) まずは「Canvas」というものを「Scene」に追加します。 図形の描画は「Scene」にするのではなく、この「Canvas」で行います。 [crayon-5c249cdee0d16865360734/] これで「Canvas」を追加することができました。 これに、「GraphicsContext」を使って色々な図形を描画していきます。 色々な図形を描画 矩形 矩形は、四角形のことです。 矩形を描画するには、「GraphicsContext」クラスの「fillRect」という関数を使います。 [crayon-5c249cdee0d20621344505/] 結果: 三角形 三角形を描画する関数はないので、「fillPolygon」という多角形を描画する関数を使います。 「fillPolygon」関数の1個目の引数は「X座標の配列」、2個目は「Y座標の配列」、3個目に「頂点の数」を入れます。 [crayon-5c249cdee0d23947493046/] 結果: 正三角形 あまり重要ではないのですが、一応「正三角形」を作るための座標設定を紹介します。 [crayon-5c249cdee0d26499295493/] 結果: 円 円を描画するには、「fillArc」関数を用います。 「fillArc」関数の引数は、「X・Y座標」と「幅・高さ」と「開始角度・終止角度」と「円の種類」が入ります。 [crayon-5c249cdee0d2e828565164/] 結果: 開始角度は「0」で、終止角度は「360」にしました。 普通に円が描きたい場合は これでOKです。 では、試しに開始角度を「0」、終止角度を「270」にしてみます。 結果: このように、「1/4」が欠けました。 このことから、開始角度と終止角度の関係はこうなっていると言えます。 円(簡単なやり方)

  • 【入門シリーズ】JavaゲームプログラミングPart12〜JavaFXを始める〜

    前回 Part12から「JavaFX」というものを使っていきます。 今まではコマンド上で操作ができる「CUI(Character User Interface)」を使っていきましたが、「JavaFX」では「GUI(Graphic User Interface)」を使うことができます。 つまり、自分でウィンドウを作ったり、画像を表示したりできるということです。 そうすればゲームの幅は一気に広がります! というわけで、実際に「JavaFX」のプログラムを書いていきます。 ちなみに、Java11より前バージョンの方は、新しくダウンロードするものは一切ありません。 ただ、Java11をお使いの方は「JFX」が必要になるのでダウンロードする必要があります。 詳しくはこちらの記事をご覧ください。 ウィンドウを表示するプログラム(基本プログラム) まずは意味などを考えず、ウィンドウを表示するプログラムを書いて「GUI」を実感してみましょう。 [crayon-5c234b48f0f75960856193/] 少し長いですが、1字1句間違えないように入力てください。 そしたらコンパイルして実行します。 Java11より前のバージョンの方は以前と同じやり方ですが、 Java11をお使いの方は「オプション」を指定しないといけないので、詳しいことは先ほどの記事をご覧ください。 そうするとこのように白いウィンドウが現れます。 ウィンドウの位置・大きさ・色を変える 位置を設定 まずはウィンドウの位置を変えてみます。 [crayon-5c234b48f0f7e364726850/] 位置は「setX」関数と「setY」 関数で、それぞれX座標・Y座標を設定することができます。 大きさを設定 大きさは、「Scene」というものの大きさを設定して、それを「Stage」に反映させるやり方をとります。 [crayon-5c234b48f0f81286964144/] 少しプログラムが煩雑になってきました。 これを実行すると「幅:640、高さ:480」のウィンドウが表示されます。 色を設定

  • 【シリーズ】JavaFXでかんたん「Webブラウザを作る」【全回リンク集】

    全部で3回 「第1回目」 「第2回目」 「第3回目」

  • JavaFXでかんたん「Webブラウザ」を作るPart3

    前回 CSSで装飾する JavaFXはCSSで装飾をすることが出来ます。 まずはCSSファイルを作ってしまいます。 今回は「form.css」としました。 [crayon-5c21f9c20f6f2570208365/] このように記述しました。 本来のCSSと少し記述内容が異なるのが特徴です。 JavaFXで用いるCSSでは、属性に「-fx」 を記述します。 それではこの「button」を、実際の「Button」に反映させていきます。 [crayon-5c21f9c20f6fa776290476/] 詳細はこの記事をご覧ください。 ではこの調子で装飾を増やしていきます。 [crayon-5c21f9c20f6fe012939135/] あらたに「pane」を作成しました。 上のバーが真っ白ではなんとなくダサいですからね。 もちろん私の勝手ですけど。。 で、「pane」を作ったので、プログラムの「AnchorPane」にもしっかりCSSの内容を反映させましょう。 [crayon-5c21f9c20f701576809761/] 次に、リロードボタンの「再」の字をなんとかしましょう。 「再 」ではどうしても見栄えが良くないので、画像に置き換えます。 今回使う画像は「icon.png」です。 [crayon-5c21f9c20f703789605358/] 新たに「buttonReload」を 作成しました。 「-fx-background-image」の後に、「url」関数を呼び出して、「icon.png」を読み込みます。 この時、「icon.png」はCSSファイルが置いてあるフォルダからの相対パスであることに注意してください。 そしたら、プログラムも変えていきます。 [crayon-5c21f9c20f705335064664/] これで画像に置き換えることができました。

  • 【入門シリーズ】JavaゲームプログラミングPart11〜配列〜

    前回 前回までのプログラムは、みやすくすると言いながらも、結果的に文章量が多くなってしまい、逆に見づらくなりました。 原因は2つあります。 1つはコンストラクタの使い方。 そして2つ目は、配列を使っていないことです。 まずは1つ目の方から解決していきます。 コンストラクタで初期化をする 前回まではこのように書いていました。 [crayon-5c21f9c503168418069886/] インスタンスの代入は仕方ないにしても、変数に値を入れる作業は全部で6行と、かなり無駄な気がします。 かといって変数に値を入れないのは解決策にはなりません。 そこで、コンストラクタの使い方に注目です。 前回はコンストラクタを宣言しませんでしたが、今回は宣言します。 そしてある文章を書き加えます。 [crayon-5c21f9c503172384947441/] 新たに書き足された「Goods()」は、コンストラクタです。 今まで関数を宣言する際は「型名」を記述しました。 「void」がそれに当たります。 しかしコンストラクタは「void」を記述していません。 これがコンストラクタの宣言の仕方なので覚えときましょう。 そしてコンストラクタに引数が2つあります。 「name」と「price」です。 この名前は任意なのですが、変数はわかりやすい名前が良いので「name」と「price」にしました。 さてコンストラクタの中身を見てください。 「this」というキーワードが登場しました。 この「this」は文字通り自分を指します。 この場合の自分とは、「Goods」クラスのことで、「this」は「Goods」クラスのインスタンスなんです。 そしてこの場合の使用用途は、引数の「name」「price」と、Goodsクラス内で宣言された「name」「price」の区別です。 これがなかったらどっちがどっちかわかりませんよね。 その上でもう一度コンストラクタの中身を見てみます。

  • JavaFXでかんたん「Webブラウザ」を作るPart2

    前回 前回の問題点 前回戻るボタンを作成し、動きまで付け加えましたが問題点が見つかりました。 その問題点は、「正しく戻れていない」ということです。 では仮に、以下のようにサイトを巡ったとします。 google.com → oracle.com → youtube.com ・・・1 そして戻るボタンを押すとどうなるかといいますと、 google.com → oracle.com → youtube.com → oracle.com ・・・2 こうなります。 実はこのならび、「getEntries」関数で得られるリストの中身なんです。 今まではこれを利用して「最後から2番目」のページに戻るようにしてましたが、「2」になった後に戻るボタンを押して「最後から2番目」のページに戻るとどうなるでしょうか。 実はまた「youtube.com」に戻ってしまいます。 これではいつまでたっても「google.com」に戻れません。 では何が原因でしょうか。 それは、戻るボタンを押した時に「oracle.com」がリストにまた追加されていることです。 ですので、戻るボタンを押した時はリストに追加されないようにする必要があります。 しかし、「getEntries」関数でアクセスできる「ObservableList」型のリストを操作するのは少し面倒になります。 そこで、「ArrayList」を用いてURLのリストを作成し、その上で、戻るボタンを押した時だけリストに追加されないようにします。 ArrayListでURLを管理する [crayon-5c21f9c547994653736660/] 「WebEngine」の読み込みの進捗を知るには、「getLoadWorker」関数で「Worker」型のオブジェクトを取得し、「stateProperty」関数で現在の状態を表す「ReadOnlyObjectProperty」を取得し、イベントリスナーを追加します。 重要なのが、このイベントリスナーを追加できるということで、これはJavaFXの特徴なので知っておくと便利です。 &nbsp

カテゴリー一覧
商用