読者です 読者をやめる 読者になる 読者になる

manmanrai’s diary

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

【新】Pixi.js でパララックススクローラーを作ってみる【第三回】

プロローグ 前回はFarとMidを独立させて、update functionも各自持たせるように変えました。 次はScroller functionを作って、FarとMidを配下に入れて、コントロール権をScrollerに持たせます。 Part2(続き) Ch03 動作メソッド化 Scrollerに任せる functio…

【新】Pixi.js でパララックススクローラーを作ってみる【第二回】

プロローグ 前回は画像を貼って、アニメーションまで完結しました。 これからの第二回と第三回はコードのメソッド化していきます。 Part 2 Ch02 画像メソッド化 Far functionにを作る function init(){ // レンダラーのサイズを指定する、コンテナ(枠)を作…

【新】Pixi.js でパララックススクローラーを作ってみる【第一回】

プロローグ 前回のものをもう一回見直して、コードを綺麗に整理しないとここにアップしないと決めました。まだまだ未熟なので、説明うまく伝えないところ、間違ってるところあれば、いつでもご指導頂ければ嬉しいです。 宜しくお願いいたします。 出処 Pixi.…

Pixi.js でパララックススクローラーを作ってみる【反省】

反省 チュートリアルを見ながら作ってましたが、理解間違ってるところあるじゃないかなと思って、part1から勉強し直しました。 そして、やっぱりミスを発見しました。 pixi.jsの最初のkittykatattackさんのチュートリアル: GitHub - kittykatattack/learnin…

「実用数学技能検定準2級」合格しました。

お恥ずかしいですが、既に社会人にもなった今数学検定を初めて受けて、そして、受かりました。 www.su-gaku.net 特に何の目的もなく取ったのですが、でも5月8日0時過ぎた後に公式ホームページで合否を確認する時かなりドキドキしていて、合格を見た時にも少…

「能力や仕事の内容と「給料」が正比例している世の中は、地獄なのかもしれない。」という記事を読みました。

先ほど、この記事を読みました。 fujipon.hatenablog.com この記事にはあるサイトの内容について語っています。 そしてそのサイトのタイトルはこちら: 「こういうのホントいいかげんにしてほしい。美術館勤務経験があって英仏独伊のうち2か国語以上できるス…

「ソフトバンクで孫社長に学んだ夢を10倍速で実現する方法」を読みました。

アマゾン https://www.amazon.co.jp/夢を「10倍速」で実現する方法-三木-雄信/dp/4569826113www.amazon.co.jp メモ わらしべ戦略 ナンバーワン戦略 くじ箱戦略 鯉とりまあしゃん交渉術 マウンテンガイド理論 起業だけではなく日常の小さな目標を持っている人…

R言語、構文から勉強します。

始める理由 Pythonの環境でもR使えそうなので、もし本当に実案件でPythonでR使いたい時あったら、事前に学んでおいた方が良いじゃないかなと思いました。 しかも、数学者が統計研究のため開発したものらしいので、数学の角度から見た方がより分かりやすくな…

「成功曲線を描こう」を読みました。

最近やたらどうすれば成功できるかみたいな本ばっか読んでますけど、社会人年数浅い自分に今すぐ何が大した成功を求めたいわけではないのですが、こういう本を読んで、将来自分がどんな人になれるの想像するだけでワクワクします。 今フォローしてるブログが…

Pixi.js でパララックススクローラーを作ってみる【第三回】

前回の話 前回は初回で作ったもののリニューアルです。見た目や動き自体変わりがありません。 今回はチュートリアルのpart2の続きです。今まで作ってきたものをメソード化していきます。 Building a Parallax Scroller with Pixi.js: Part 2 続き 先ほどFar…

「非常識な成功法則」を読みました。

「勇気づけられる内容である」アマゾンのレビューでそう書いてありました。 やりたい事ぼんやり決めていた人にとって、やってみようかという気持ちになれるかもしれません。 メモ 短期の目標の設定方法 - SMARTの法則 1. S具体的である 2. M計測ができる 3. …

「心に響くことだけやりなさい」を読みました。

読みやすかったので、一気に全部読みました。 本の後半に段々「ザ・シークレット」に近い内容になっているような気がします。 お時間あったら読んでみても良いかなと。 メモ 望む未来を手に入れる三つのステップ インテンション(意図) アテンション(注意…

Pixi.js でパララックススクローラーを作ってみる【第二回】

前回の話 前回は二枚の画像を重ねさせ、動かしました。 今回はそれの進化型です。 Building a Parallax Scroller with Pixi.js: Part 2 構造の理解 前回に出てきた二種類スプライト、スプライトとタイリングスプライトなんですが、どちらもwidth, height, al…

Pixi.js でパララックススクローラーを作ってみる【第一回】

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

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月の現時点)、英語のチュートリアル(文末にリンク貼っておきます。)を読み、単語の意味調べながら、やりながらちょっとずつ勉強の記録書きます…

Canvasの応用(重なる複数の円形にアニメーションとリンク機能)part1

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

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">

macでfinkインストール

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

macでPython3 Selenium PhatomJSインストールする記録(まだ成功していません4/5)

インストール記録 環境 mac 10.10.5 方法1 バージョン確認(python、pip生存確認): $ python3 -V Python 3.4.0 $ pip3 -V pip 1.5.4 from /Users/*****/.pyenv/versions/3.4.0/lib/python3.4/site-packages (python 3.4) pip3でSeleniumインストールする $ p…

python2.x系、3.x系共存・切り替え

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

ブログを始めました。

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