背景 Pixi.jsの公式サイトにはおすすめのチュートリアル幾つか載せています。 Tutorials - PixiJS v4 最近書き終えたばっかのこのシリーズ pixi.js カテゴリーの記事一覧 - manmanrai’s diary はこのチュートリアルを参照したものになります。 GitHub - kitt…

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

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

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

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

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

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

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

勉強する理由 少し遅いかもしれませんが、いま実案件で先方の要望のより、少し変わった円の上にさらに重なってる斜めの半円形二つ目を作ることになりました。しかも、その変わった形にリンクの機能とアニメーションをつけて欲しいと。 今回はどうしても逃げ…

目的 スムーズにページ遷移するサイト（非同期通信をしながら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">

環境 Mac 10.10.5 インストール理由 apt-getを使いたい。 手順 公式サイトからダウンロードする Fink - Source Release Download 解凍し、コマンドラインでフォルダに入って、実行する $ cd cd /Users/*username*/Downloads/fink-0.41.1 $ ./bootstrap いき…

www.socym.co.jp 機械学習など勉強するため、python3を入れたくて、 でもpython2も残したいので、共存できる方法探しました。 環境 mac 10.10.5 手順 pyenv(pythonバージョン管理ツール)インストールする brew install pyenv pyenv-virtualenvインストールす…

2017年4月1日土曜日。 エイプリルフールの日にブログを始めたいと思います。 理由 今の会社に入社して、二年目に突入しました。 振り返ってみると、この会社で色んな経験させて頂いたと思いました。 そして入社と伴って、初めて東京で一人暮らしも始めました…