こんにちは。
MouDame ねお (@noir_neo) です。
この記事はMD Advent Calendar 2014(http://www.adventar.org/calendars/572) 1日目の記事です。
ついに始まりましたMD Advent Calendar!!
当初は、ぼくは何記事書かなきゃいけないのだろうかと思っていたら、みんなノッてくれたおかげで毎日埋まりました!
今月が毎日楽しみです。
さてタイトルのノエルがかわいすぎて辛い話です。
ノエルisこの子
http://sora-no-method.jp/character/#noel
めっちゃかわいい。天使。
今期芳文社枠ないし何で癒やされればいいんだー絶望だーとか言ってた過去の自分に代わって謝罪してる。
オタクは3ヶ月おきに嫁が変わるとか言われてるけど、この子は別格(いつもそう言う)
もうロリコンでいいや。
というわけで天体のメソッド見てない人はニコ生で振り返りがあるんで見るといいと思います。
なんかもうシリアスなのとかイライラするのはどうでもいいんです。かわいいノエルだけ見ていましょう。
昨日の9話とかもう不憫すぎて夢に出てきましたし。
ちなみに最近のラップトップの環境はこんな感じです。
生産性めっちゃ上がってる。
あとクリスマスプレゼントはこれください!お願いします!
出席管理forクズNext開発がんばるんで!お願いします!
ところで話変わりますが、カルディでノエルって名前で売ってるブレンドがめっちゃ美味しい。
最近はシールじゃなくてパッケージが専用のものになって売っていますね。
パケ買いというか名前買いしたわけですが、かなり好みの味で気に入ってます。
というクリスマスっぽい話題でした。
本当はBracketsプラグインでも作ってその話をしようと思ってたのですが、時間とやる気がなかったのでお茶を濁す感じのエントリになりました。
アイデアあるので、そのうちやります。
では、このへんで。
2014年12月1日月曜日
2014年8月28日木曜日
Bracketsプラグインを作って背景にミクさんを表示してみた
はい、みなさんおはようございます。Brackets使ってますか~?
Bracketsとは、Adobeが開発・公開している無料のテキストエディタです。Adobe CCにも"Edge Code"という名前で入っています。これを最近私は愛用しています。
Bracketsは特にWebコーディングに適したエディタとされていて、すごいのはそのBrackets自体がHTML / CSS / JavaScriptで書かれているということ!さらに本体の機能はとてもシンプルで軽量なのですが、追加機能が「プラグイン」という形でたくさん作られているので、必要に応じてインストールすることでより便利にできます。当然、そのプラグインもJSとCSSで書かれているので自分で作ることもできちゃいます!
で…
最近ぼくもエディタの背景にかわいい女の子画像を表示しておきたいな~~~なんて思いはじめたんですね。
例えば"Android Studio"だと"SexyEditor"というプラグインがあって
こんなかんじですぐできちゃうんですが、 どうもBracketsには見つけられなかったのでググったら Brackets - エディタとしては正直まだまだ、だけど、、、 - iakioの日記 -
というエントリを見つけたのでこちらを参考に自分で書いてみましたよ~というのが本題
とりあえずコード
jsは参考サイトそのまんま
cssは画像の後ろにも背景色を置きたかったので擬似要素を使いました。
透過で重ねてる色は、もともと使っている"Dark Soda"というテーマのCSSから該当する部分を抜き出した感じです。なので汎用性はありません。
(だったら元のそのCSSに上書きしていけばいいじゃんっていうツッコミはなしです!)
追記:ラップトップに持って行ったらどうもうまくいかない…と思っていたら、Themes for Bracketsを更新していなかっただけという。つまり今後そちらの更新でクラス名とかが変わって動かなくなる可能性もありますね…そんときはまた考えます。でもそちらも更新されているのならたぶん、直接いじるのではなくプラグインで更に上書きする意味はあるね?
それでできあがりがこんな感じ
ミクさんめっちゃ天使。最高。
ちなみにエラー吐き出すコンソール部分はレイヤーが下らしく、こんなんになってしまうんですがなんとなくえっちぃ感じにできるのでこのバグはfixしないことにしました。
と、まあ本題は以上です
まとめとしては
夏休み、ほとんどコード書かずに環境構築かゲームしかやってきませんでしたが、この前のライブコーディングといい、プラグイン実装といい、コーディングモチベ上がってきたのでそろそろFU2スタートしそうな予感です。
Bracketsとは、Adobeが開発・公開している無料のテキストエディタです。Adobe CCにも"Edge Code"という名前で入っています。これを最近私は愛用しています。
Bracketsは特にWebコーディングに適したエディタとされていて、すごいのはそのBrackets自体がHTML / CSS / JavaScriptで書かれているということ!さらに本体の機能はとてもシンプルで軽量なのですが、追加機能が「プラグイン」という形でたくさん作られているので、必要に応じてインストールすることでより便利にできます。当然、そのプラグインもJSとCSSで書かれているので自分で作ることもできちゃいます!
で…
最近ぼくもエディタの背景にかわいい女の子画像を表示しておきたいな~~~なんて思いはじめたんですね。
例えば"Android Studio"だと"SexyEditor"というプラグインがあって
こんなかんじですぐできちゃうんですが、 どうもBracketsには見つけられなかったのでググったら Brackets - エディタとしては正直まだまだ、だけど、、、 - iakioの日記 -
というエントリを見つけたのでこちらを参考に自分で書いてみましたよ~というのが本題
とりあえずコード
jsは参考サイトそのまんま
/* main.js */ define(function (require, exports, module) { var ExtensionUtils = brackets.getModule("utils/ExtensionUtils"); ExtensionUtils.loadStyleSheet(module, 'style.css'); });
cssは画像の後ろにも背景色を置きたかったので擬似要素を使いました。
/* style.css */ .CodeMirror-wrap::before { content: ''; position: fixed; bottom: 0; right: 0; width: 80%; height: 80%; background: url("bg.png") no-repeat right bottom; background-size: contain; } .CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters { background: rgba(51, 51, 51, .8) !important; } .CodeMirror-activeline-background, .CodeMirror-gutter-elt { background: rgba(60, 63, 65, .7) !important; }
透過で重ねてる色は、もともと使っている"Dark Soda"というテーマのCSSから該当する部分を抜き出した感じです。なので汎用性はありません。
(だったら元のそのCSSに上書きしていけばいいじゃんっていうツッコミはなしです!)
追記:ラップトップに持って行ったらどうもうまくいかない…と思っていたら、Themes for Bracketsを更新していなかっただけという。つまり今後そちらの更新でクラス名とかが変わって動かなくなる可能性もありますね…そんときはまた考えます。でもそちらも更新されているのならたぶん、直接いじるのではなくプラグインで更に上書きする意味はあるね?
それでできあがりがこんな感じ
ミクさんめっちゃ天使。最高。
ちなみにエラー吐き出すコンソール部分はレイヤーが下らしく、こんなんになってしまうんですがなんとなくえっちぃ感じにできるのでこのバグはfixしないことにしました。
と、まあ本題は以上です
まとめとしては
- Bracketsめっちゃいいエディタです
- プラグインが簡単につくれます
- ミクさんはエディタの背景になってもやっぱり天使
- コーディングへのモチベ上がる↑↑
夏休み、ほとんどコード書かずに環境構築かゲームしかやってきませんでしたが、この前のライブコーディングといい、プラグイン実装といい、コーディングモチベ上がってきたのでそろそろFU2スタートしそうな予感です。
2014年8月26日火曜日
Live Coding de Night #libcodingso に行ってきました♡
8/23(土)、 @numa08 さん主催の libcoding de night #3 Rock'N'Loll に参加してきました~のレポートです。
前回に引き続き、またパフォーマンスもさせていただきましたよ!
こうして呼んでいただけるのは本当にありがたいことです……
ライブコーディング is 何とか、当日の写真などはぬまさんのブログに任せるとして
最高の夜をコードと共に Live Coding de Night #libcodingso - @numa08 猫耳帽子の女の子 -
今回はお酒を吸いながらだったのでなかなかハイでした。高いだけあっておいしい。
あとバーテンダー(っていうの?)のお兄さんがめっちゃイケメンだった!!(注:ねおさんはレズ)
それから、私のパフォーマンス内容ですが、ホントはミクさんとイチャイチャする予定が、ラップトップの復旧作業で準備できず…tmlib.jsの布教をしました。
実は以前 #MD勉強会 でやった内容っていうのは内緒の話
完成品的なものはこちらで
http://noir-neo.github.io/md-stu140614/
大したものじゃありませんが、コードは一応こんなんです
https://github.com/noir-neo/md-stu140614/blob/develop/js/main.js
それからパフォーマンス終了後のゆったりお酒タイム、 @pside さんとAndroidネイティブでミクさんとイチャイチャする話をしたのが最高に楽しかった。まあ、課題が増えたんですが、とっかかりも掴めたし、今までなかった視点だったのでホントよかった。ありがとうございました。FUプロジェクトで対応がんばってみたいです!!
そんなこんなで夏休みもそろそろ終盤。進捗がんばろ~
2014年3月24日月曜日
Global Mathのゲーム制作をしてプログラマ視点で思ったこと
前回のネオブログ!
お話の前提としては、前回の投稿
数学的思考力ゲームを作って賞をいただいた話
をご覧ください。
作ったゲームは以下で公開しています。
THE SUGOI NINJA
ぜひ遊んでみてくださいね♡
今回
技術的な話と、制作においてプログラマ視点で思ったことを、覚えている範囲で書き綴っていきます。
ディレクタとゲームデザインやエディタも兼任していたのですが、一応その辺は分離して書いていくつもりです。
自分用の備忘録としても、ですね。後半ほぼ愚痴ですが…w
ディレクタとゲームデザインやエディタも兼任していたのですが、一応その辺は分離して書いていくつもりです。
自分用の備忘録としても、ですね。後半ほぼ愚痴ですが…w
一応、今後このプロジェクトに参加しようかと考えている学生の参考にもなったらいいなーと。たぶん育っていくプロジェクトだと思うので。
ゲーム実装
主な要件は以下の通りでした- JavaScript + HTML5
- enchant.js推奨
- (プラットフォームとして、将来的にはタブレット対応予定)
「なるほど、enchant.jsね……マジか」
「よし、tmlib.js使おう」
という感じでライブラリはtmlib.jsを採用。
こちらについては本当に素晴らしいライブラリだったとしか言うことはありません。
ただ、CSSでいうz-indexの入れ替えが用意されていないのが困った。調べても、同じ問題に当っていた方は見かけて解決まで辿り着いていたっぽいけれど、実装自体は見つからなかったので、Qiitaあたりに書こうかなと。
あとサウンド周りがよくわからなかった、というか締切日最後の2時間くらいで実装したので、普通にWeb Audioを直接叩いてますが、きっとあとで直します。
それとタブレット対応という意味でも、ライブラリのおかげで実装時は一切気にせずクリア。そもそもモバイル向けに設計してないから少しボタンが小さいけれど、スマートフォンでも動作可能を実現できた。
ただしpointingendの挙動に不満があるので暇見てフォークぶっ刺すかissue投げるかしようかと考え中。ボタン外にドラッグしてからのクリックエンドにも反応されちゃうのが、間違って押したときのキャンセルができずにユーザビリティ悪いなぁ…という。
なんか悪いとこばかり並べてしまったけど、ほんと総じて素晴らしいライブラリです。HTML5 Canvasでなんかやりたい人には超おすすめです。たぶん今年は大学で布教しまくります。できればコミュニティに貢献できたらとも考えています。
API実装
問題はこっちです。
Twitterで相当ブチギレてた。
だいぶキてた感じの2月末から3月上旬だった。
- API通信に必要なデータをlocation.searchで取ってる
- インラインフレームで埋め込まれるゲームとAPIエンドポイントが別ドメイン
- にも関わらずAccess-Control-Allow-Originが設定されていないっぽい←???
- サンプルコードは闇実装
これ系は素人の私でも、さすがにやばいだろ…と思わせるだけの何かがあった。
締め切り前、散々中の人とメールでやりとりし、たぶんいろいろやばいよっていう話と、実装怠いからAccess-Control-Allow-Originしろっていうことを言い続けましたが、まあ大企業らしい対応をいただきました。中の人はそもそもよくわかってなかったっぽいし、請けてる開発会社もいったいどんな所なんだろうと…ある意味勉強になりましたよ。
暇な人はぜひ中身見て脆弱性でも探してください。
Global Math
ちなみに、最終的には大変不本意ながら、サンプルコードの闇実装を引用してラッパーライブラリを作りました。
https://github.com/noir-neo/neoGMapi/blob/master/js/neogm.js
今度プログラマにヒアリングを行ってくださるらしいので、たくさん意見してきたいと思います。
それとクリエイター側で自由にデータを保持できないのがブチギレ。
例えばぼくらのゲームではサブクエストを各レベル2つ用意しているから、それのクリアフラグを保持したかった。
- 勝手に使っていいプロパティが用意されてないかな?
- →ない
- ハイスコアというプロパティがあるから、これの数字を調整すればクリアフラグの保持もできるな?
- →ハイスコアとは1回のプレイの累計スコアのこと(←?????)
- →各ステージごとではない
- boolの2進数をサブクエスト2つ*15ステージで30桁→10進数(送信できるスコアは10桁までだから)に直してスコアにぶち込んでやる!!
- →送ったスコアが足されていくから数字が合わない
- ↑の計算方法で、プレイの最初に送るスコアは生、それ以降は前回との差の数字だけ送る
- →やっと解決!!
THE SUGOI NINJAのリプレイデータは、ステージ番号と、8方向の移動に数字を割り振ったらそれの配列だけで保持できるし、実現できたら分析と改善に役立てられてとてもよかったのだけど。
つまり何が言いたいかというと、闇な実装をさせる割にクリエイター側にとってメリットがない。
プレイ時間とか試行回数とかまとめたデータはいただけるらしいけれど。どうも考えのズレを感じます。
もっと言ってしまえば、プラットフォーム自体にクリエイターにとってのメリットが少ない。
今のところ利用者が多いわけでもないし、今どき自作ゲームを公開する場所なんていくらでもある。
学生を良いように使ってやろうっていう魂胆が見えるのが非常にムカつきましたね。クリエイターを舐めてるタイプですね。
まあ、見事に使われたわけですが…。別に利用権をあげたくらいで、入賞商品として少しですがギフトカードもいただいたし、許してやろう。良くも悪くも勉強になった。
まとめ
後半は散々ネガティブなことを書きましたが、コンテストに参加しての変な意味での最大のメリットは期限があるということだったと思います。必要に駆られて時間に追われてやるのはスキルアップにはとてもいいです。大人の人に向かって生意気を言うのもいい経験です。
また別の話ですが、お隣の大学と交流しながら中間発表とかに混ぜてもらった事は、とても良い経験でした。
そんなわけで、何か作りたいけど何を作ったらいいかわからない、なんて人には一つの選択肢としてはおすすめです。これはなんのコンテストでも一緒かもしれないけど。逆に言えばこれに参加することに特別なメリットってやっぱり見つけられないなぁ……
仮に後輩に「Global Mathコンテストってどうなんですか?」って聞かれたら、答えに窮するだろうなぁ……
ネタとしてはまだゲームデザインに関するところが残っているので、また暇なときに書きます。
では。
2014年3月22日土曜日
数学的思考力ゲームを作って賞をいただいた話
こんばんは、ねおりんです♡
突然ですが、春休みの模様をダイジェストでお送りします。
まずですね、ベネッセコーポレーションのGLOBAL MATHという数学的思考力ゲームのプラットフォームがありまして。。
まあ、数学的思考力ゲームとはなんぞやという説明はこちらに譲ります。
それで、そこのコンテストがあるということで、いろいろあって参加することになり…
とりあえず優秀なメンバーをスカウトしたわけです。
以上3名と、私がディレクタ兼プログラマとして、4人で、1月くらいから開発していました。
そして2週間前の3月7日(金)がコンテスト応募締め切りで、昨日21日がコンテストの成果発表会だったわけですが……
大変光栄なことに「開発優秀賞」というものをいただきました。(まず入賞は当然だとチーム全員が確信していましたがww)
最優秀賞ではなかったのは少し悔やまれますが、まあ用意されていた賞の中では妥当なところだろうと、満足しています。
それで、肝心のゲームをぜひ遊んでいただきたいのですが!
ベネッセの中の人が、いつまで経ってもアップしてくれない。
コンテスト発表会前にはアップするっていう話だったような気がするんだけどなぁ……
というわけで、
THE SUGOI NINJA
自分で上げた。
「THE SUGOI NINJA -ザ・スゴイ・ニンジャ-」は、マス目・ターン制移動のゲームです。敵は規則的に移動します。先を読みながら、敵に見つからないようゴールを目指してください。
メインターゲットは小学校高学年としていますが、ゲーム性自体は大人まで広く遊んでいただけるものになっていると思います。ぜひ頭を使いながら楽しく遊んでいただけたらと思います。
よろしければフィードバックをいただけるとうれしいです!
スマートフォンでも一応動作します!(実装上は対応しているけど、モバイル向けに設計はしていないので操作に少しストレスを感じるかもしれません)
ブラウザ対応は
まだもう少しだけアップデートは続ける予定です。
また、ライブラリとしてtmlib.jsをお借りしています。
とっっっってもコーディングが楽になって、プログラマとしてはかなり救われました。作者のphiさんはじめコミュニティの皆様には大変感謝しております。
次は制作秘話とか、愚痴とか、溜まったノウハウとか、気が向いたら書くかもしれません。
ブログちゃんと使っていこう…
では。
突然ですが、春休みの模様をダイジェストでお送りします。
まずですね、ベネッセコーポレーションのGLOBAL MATHという数学的思考力ゲームのプラットフォームがありまして。。
まあ、数学的思考力ゲームとはなんぞやという説明はこちらに譲ります。
それで、そこのコンテストがあるということで、いろいろあって参加することになり…
とりあえず優秀なメンバーをスカウトしたわけです。
以上3名と、私がディレクタ兼プログラマとして、4人で、1月くらいから開発していました。
そして2週間前の3月7日(金)がコンテスト応募締め切りで、昨日21日がコンテストの成果発表会だったわけですが……
大変光栄なことに「開発優秀賞」というものをいただきました。(まず入賞は当然だとチーム全員が確信していましたがww)
最優秀賞ではなかったのは少し悔やまれますが、まあ用意されていた賞の中では妥当なところだろうと、満足しています。
それで、肝心のゲームをぜひ遊んでいただきたいのですが!
ベネッセの中の人が、いつまで経ってもアップしてくれない。
というわけで、
THE SUGOI NINJA
自分で上げた。
「THE SUGOI NINJA -ザ・スゴイ・ニンジャ-」は、マス目・ターン制移動のゲームです。敵は規則的に移動します。先を読みながら、敵に見つからないようゴールを目指してください。
メインターゲットは小学校高学年としていますが、ゲーム性自体は大人まで広く遊んでいただけるものになっていると思います。ぜひ頭を使いながら楽しく遊んでいただけたらと思います。
よろしければフィードバックをいただけるとうれしいです!
スマートフォンでも一応動作します!(実装上は対応しているけど、モバイル向けに設計はしていないので操作に少しストレスを感じるかもしれません)
ブラウザ対応は
- IE音出ない
- Firefox動作重い
- など
まだもう少しだけアップデートは続ける予定です。
また、ライブラリとしてtmlib.jsをお借りしています。
とっっっってもコーディングが楽になって、プログラマとしてはかなり救われました。作者のphiさんはじめコミュニティの皆様には大変感謝しております。
次は制作秘話とか、愚痴とか、溜まったノウハウとか、気が向いたら書くかもしれません。
ブログちゃんと使っていこう…
では。
2014年3月21日金曜日
登録:
投稿 (Atom)