manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

フロントエンド

2D WebGL renderer Pixi.js v4【連載最終回】

前回の話 最後のプロジェクト「宝探しゲーム」の下準備しました。 (setup function の中身) 続きは、play functionとend functionゲームの核心の部分です。 ※ 自分わかるように整理したので、チュートリアルの順番少し違います。 play function 登場人物と…

2D WebGL renderer Pixi.js v4【連載第六回】

前回の話 WebGLでいろんな図形と文字の描き方を一通り復習しました。 これから本番に近づけたらいいなと。 衝突探知 理想はこんな感じです。 左のねこはキーボードで操作できる要素、右のブロックは動かぬもの、そして、上のメッセージはcanvasで書いた状態…

2D WebGL renderer Pixi.js v4【連載第五回】

前回の話 スプライトのグルーピングとContainerとParticleContainerの話でした。 今日はWebGLで図形を描き方です。 図形の描き方 canvasのjavascript書いたことある方多分この部分飛ばしずつ進んで良いと思います。 まずは、PIXI.Graphicsを使って、色々描い…

2D WebGL renderer Pixi.js v4【連載第四回】

前回の話 スプライト作成編終わりまして、(無限)アニメーションを作ってみました。 そして、キーボードの方向キーで上下左右でスプライトを移動させてみました。 スプライトのグルーピング グルーピングすることとは、新たなContainer()を作って、同じシー…

2D WebGL renderer Pixi.js v4【連載第三回】

前回の話 スプライトを作る三つの方法の中の方法一と方法二、二つとも完結しました。 あと、方法三もJSONの部分を紹介しました。 三つの方法: 画像を使う(個別一個一個を読み込む) プロジェクト内に使いたい全部の画像(sub-image)をまとめた大き画像(t…

2D WebGL renderer Pixi.js v4【連載第二回】

前回の話 スプライトを作る三つの方法を紹介しました。 三つの方法: 画像を使う(個別一個一個を読み込む) プロジェクト内に使いたい全部の画像(sub-image)をまとめた大き画像(tileset)を使う(複数枚の画像を一枚にまとめるってこと) JSON(texture …

2D WebGL renderer Pixi.js v4【連載第一回】

背景 いまどき大人気の2D WebGLを作れるjsライブラリーです。日本語のチュートリアルも少ないなので(2017年4月の現時点)、英語のチュートリアル(文末にリンク貼っておきます。)を読み、単語の意味調べながら、やりながらちょっとずつ勉強の記録書きます…

TypeScript導入記録

理由 TypeScriptの学習コストが低いっぽい、しかも厳密なJavaScriptバージョンらしい JavaScriptとTypeScript比べたら 変数のデータ型あらかじめ決めておける。(静的型付け) クラスを簡単に記述できる コンパイル環境作り ※ node.js公式サイトからダウンロ…

非同期通信ライブラリーpjax.js使い方、難しいところ

目的 スムーズにページ遷移するサイト(非同期通信をしながらURLを変更する) (スーパーパフォーマンスの良いサイトを作ってみたかったです。) 使い方 使用JS: jQuery PJAX公式サイト ステップ: 静的なページを作る(html,css) jsを読み込む <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="./js/jquery.pjax.js"></script> <script src="./js/common.js">