[TypeScript] enumの挙動(修正ずみ)

2013/08/9

こんにちは。きんくまです。

※2013/08/10修正
コメントいただきました!

以下の情報は先日公開されたTypescript 0.9.1で直ってました。
どうやら0.9.0だけのようです!

以下もと記事です
———————————

今回はTypeScriptのenumの挙動についてです。

C言語の場合

C言語だと(ひょっとしたらコンパイラに依存するかも。今回はLLVM)

enum Color{
    Red,
    Green,
    Purple,
    Blue,
    Yellow
};

と書いたときは、

Red -> 0
Green -> 1,
Purple -> 2,
Blue -> 3,
Yellow -> 4

となって、0スタートではじまって、1ずつインクリメントされます。

enum Color{
    Red,
    Green,
    Purple = 8,
    Blue,
    Yellow
};

上のように途中で値を設定すると

Red -> 0
Green -> 1,
Purple -> 8,
Blue -> 9,
Yellow -> 10

そこで値がリセットされてそこからまた1ずつインクリメントされていきます。

で、この挙動に慣れていたので、TypeScriptのenumがちょっと違ってたのでその話です。

TypeScriptのenum

    export enum Color{
        Red,
        Green,
        Purple,
        Blue,
        Yellow
    }

0.9.0のコンパイラだと

Color.Red -> 0
Color.Green -> 1,
Color.Purple -> 2,
Color.Blue -> 3,
Color.Yellow -> 4

これはCと同じです。

    export enum Color{
        Red,
        Green,
        Purple = 8,
        Blue,
        Yellow
    }

これが違っていて、

Color.Red -> 0
Color.Green -> 1,
Color.Purple -> 8,
Color.Blue -> 0,
Color.Yellow -> 1

値指定したあと、その数値を基準にインクリメントされずに、また0に戻る仕様になってました。
うーん、ちとメンドい仕様かも。

LINEで送る
Pocket

[AS3] AIR for iOS / Android日記とか

2013/08/7

こんにちは。きんくまです。

先月ぐらいからAIR for iOS / Androidをやってます。あれ、すごい便利になってました。ちょうど一年前くらいにF-siteで発表してたんですけど、それよりもツールの全体的なまとまり方とか、すごくこなれてきてます。

>> [AS3] 2012年7月のF-site の発表です

ただ、開発環境を整えるのが面倒かもしれない、、。自分の場合はもともとFlash Builderとか使ってたから大丈夫だったけど、それでもわかりにくかった、、。そこさえ乗り切れば、わりと良いと思います。

Stage3D使うと、速度的にもそこそこ出る感じです。
iOSでは60fpsはだいたい大丈夫。Androidは機種により40fpsとか。自分の持ってるの古いやつだから、新しいやつだと60fps出るのかな? まあ、30fpsにしとけばたいてい大丈夫かと。

ファイル書き出しのサイズはちょっとネックになる場合があるかもです。
空のプロジェクトのRelease Buildで、iOSは10MBぐらいで、Androidは28MBぐらいでした。AndroidはAIRのランタイムを埋め込んだ状態のものです。ランタイム埋め込まないと軽いけど、実行環境が未知の状態になっちゃうので、できれば埋め込んでおきたいです。iOSはランタイムとかないんで、このままでOKです。

Stage3Dは、2D用のStarlingと3D用のAway3Dを混ぜて使っても大丈夫だったりします。
その他に、Stage3Dじゃない従来の描画も使うこともできるので、あるシーンではタイムラインを使ったもの。あるシーンではStage3Dを使うなんてこともできます。

ただ、タイムラインのアニメーションは比較的重い処理なので、複雑なものはきびしい感じ。1画面でひとつずつフェードイン・アウトさせてくとか、ポイントしぼってやる必要がアリ。
んー、速度が必要なものはやっぱStage3Dなのかな。
コンテンツの内容によって求められる速度とか描画内容とかがあるんで、こればっかりは一概にはいえないですね。

とはいえ、「iOS, Androidをワンソースで管理したくて、ちょっとしたインタラクションつけたいコンテンツ」であれば、AIRは現実的な選択肢だと思いました。
あと、カジュアルゲームとか。

いまノウハウをいろいろと勉強しながら貯めてるんで、そのうちブログに書いてくかも。

LINEで送る
Pocket

[TypeScript] イベント Delegateパターン

2013/08/7

こんにちは。きんくまです。

暑い日が続きますね。なんだか忙しくなってきたので、気晴らしに記事投稿です。

このブログのアクセスログを見てたら、iOSのProtocol – Delgateパターンの記事が上の方に来てました。

>> [iOS] Protocol – Delegateパターン | Objective-C イベント伝達 その1

その1とか書いておいて、その2以降を書いてません!
スミマセン!

それで、TypeScriptでも同じパターンのものを書いて使ってます。なのでその紹介です。

この投稿の続きを読む »

LINEで送る
Pocket

Android版 Firefoxで描画がおかしくなったらブラウザを再起動

2013/07/22

こんにちは。きんくまです。

Canvas使ったものを作っていて、Android版Firefoxでデバッグしてたら、挙動がおかしくなったことに気がつかず、時間をかなりロスしたというお話です。これは、端末に依存する現象かもしれないので、Firefoxが悪いとかそういうことをいいたいわけじゃないです。ただ、たまたま同じように時間をロスしない人が出ないといいなと思って書いてマス。

この投稿の続きを読む »

LINEで送る
Pocket

[C/C++] C++11でスマートポインタを使ってみたい

2013/07/17

こんにちは。きんくまです。

C++をやってます。
前にもやったことがあって、基本的な文法や使い方はわかっていたのだけど、細かいところを知らなくてあわあわしてます。

それで、オブジェクトをnewしたらdeleteが基本!みたいに覚えていたんですが、最近はスマートポインタというのがあるみたいです。

C++11という規格があって、そこに以前からあったBoostっていうライブラリで使われてた機能を盛り込んだみたい(違ってたらごめんなさい)。

Boostはなんかすごい便利みたいなんだけど、使ったことないからわかんないです、、。

で、スマートポインタです。

この投稿の続きを読む »

LINEで送る
Pocket

[JavaScript] CreateJSでタッチデバイスでダブルタップしたい!

2013/07/13

こんにちはきんくまです。

CreateJSをやってまして。といっても、Flashから何かを書き出すわけではなくて、EaselJS落としてきて使っているだけなんですけど。

使っている感想としては、便利です。

それで、タッチデバイスでダブルタップしたいという件についてです。
まず、dblclickイベントは、タッチデバイスだとうまく動きませんでした。Surface ProのIE10だとちょっと修正すると動いてくれました。
なので、マウスでなくタッチ系のiOS、Androidでも動くように自前で作ってみました。
ひょっとしたらEaselJSにすでに組み込まれてるのかもしれない、、。

はじめに今回の参考ページです。

>> ポインター イベントとジェスチャ イベント
>> タッチ操作向けサイト構築のガイドライン

この投稿の続きを読む »

LINEで送る
Pocket

[Sass] Retina対応のスプライトシート用 sass mixin

2013/07/6

こんにちは。きんくまです。

Retina対応を調べてました。
わかりやすくまとめられてました。

>> Webサイト&WebアプリのRetina対応方法まとめ | KRAY Inc

で、sassでmixinとかあるんじゃないかなと思ったら公開されてました。

>> FREE! Sass (SCSS) mixin for including retina images (useful when developing for iOS).

どちらも貴重な情報ありがとうございます!

んで、これを組み合わせて、スプライトシート版にしたいなーと思って、ちょっとだけ加えたのがこれです。名前が長いんで、適当に短くするとよいかも。

@mixin background-image-retina-with-spritesheet($file, $type, $width, $height, $posX, $posY) {
	background-image: url($file + '.' + $type);
	background-repeat:no-repeat;
	background-position:$posX/2 $posY/2;

	@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
		& {
			background-image: url($file + '@2x.' + $type);
			-webkit-background-size: $width/2 $height/2;
		}
	}
}

引数の説明
幅や高さ、位置は、Retina画像用のものを利用します。

$file: 拡張子のぞいた画像パス(../path/to/image)
$type: 画像の拡張子(’png’)
$width: 画像の実際の幅
$height: 画像の実際の高さ
$posX: スプライトシート上の位置X
$posY: スプライトシート上の位置Y

で、Retina版のmyfile@2x.pngと通常版のmyfile.pngを用意します。
画像のリサイズはいろいろとツールがあると思いますが、自分はfladdictさんのブログ(かTwitter)に書いてあったResizerを使ってます。
iOSネイティブアプリ開発のお供になってます。

>> Resizer

サンプル scss

#foo{
    @include background-image-retina-with-spritesheet('../images/myfile', 'png', 400px, 200px, -100px, -50px);
}

出力 css

    #foo {
      background-image: url("../images/myfile.png");
      background-repeat: no-repeat;
      background-position: -50px -25px; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #foo {
          background-image: url("../images/myfile@2x.png");
          -webkit-background-size: 200px 100px; } }
LINEで送る
Pocket

ページトップへ戻る