tomo.mobi

Representation design of material


canvasでじゃんけんゲーム

canvasでじゃんけんげーむをつくってみる。
まずは、ひな形。

 <html>
 <head>
 <meta charset="utf-8" />
 <title>CANVASサンプル「じゃんけん」</title>
 </head>
 <style>
 body{
 text-align: center;
 }
 </style>
 <body>

 <!-- ヘッダ -->
 <header>
 <h1>CANVASサンプル</h1>
 </header>

 <!-- メインコンテンツ -->
 <article>
 <hgroup>
 <h1>じゃんけん</h1>
 </hgroup>
 <aside>
 <p>ボタンを押すとじゃんけんできます</p>
 <canvas id="canvas" width="500" height="500" style="display:block; margin:10px auto;border:solid 1px #ccc"></canvas>
 </aside>
 </article>

 <!-- フッタ -->
 <footer>
 Copyright 2015
 </footer>
 <script>
 function loop() {
 /* Canvas要素の定義など */
 var cs = document.getElementById('canvas');
 var ctx = cs.getContext('2d');
 var w = cs.width;
 var h = cs.height;
 var ww = window.innerWidth;
 var x = 0;
 var mouseX;
 var mouseY;
 
 /* 舞台用意 */
 function render() {
 ctx.clearRect(0, 0, w, h); // Canvas全体をクリア。必ず必要ないと何度も書き直しー

 ctx.beginPath();

 //ぐー
 ctx.strokeRect(105, 65, 287, 287);
 //ちょき
 ctx.strokeRect(28, 400, 141, 63);
 //ぱー
 ctx.strokeRect(179, 400, 141, 63);
 //ランダム表示
 ctx.strokeRect(329, 400, 141, 63); 

 ctx.stroke(); //これをきじゅつしないと描画されない

 }
 render();
 document.addEventListener('mousedown', test);

 function test() {
 mouseX = event.pageX-((ww-450)/2);
 mouseY = event.pageY-200;
 render();

 //hitTest
 if(mouseX<169 && mouseX>28 && mouseY<463 && mouseY>400 ){
 console.log("ぐー");
 jankenEvent();
 }
 if(mouseX<320 && mouseX>179 && mouseY<463 && mouseY>400 ){
 console.log("ちょき");
 jankenEvent();
 }
 if(mouseX<470 && mouseX>329 && mouseY<463 && mouseY>400 ){
 console.log("ぱー");
 jankenEvent();
 }
 }
 function jankenEvent(){
 var kekka = Math.floor(Math.random()*3);
 var kekka_text;
 switch(kekka){
 case 0:
 kekka_text = "ぐー";
 break;
 case 1:
 kekka_text = "ちょき";
 break;
 case 2:
 kekka_text = "ぱー";
 break;
 default:
 break;
 }
 ctx.fillText(kekka_text, 225, 215);
 console.log(kekka);
 console.log(kekka_text);
 };
 }
 //ハンドラー
 loop();
 </script>
 </body>
</html>

とりあえず、PCで作ってみる

Published by tomoka , on 11月 6th, 2015 at 11:08 pm. Filled under: AndroidNo Comments
この記事を読む

マテリアルデザイン プロダクトアイコン

まえおき:英語良く分かっていないのですが、原文を読んで、翻訳しながら解釈した内容を日本語で書いていますので比喩があるかもしれません。また、自分の感想を書いている箇所もあるので、文章全てがページに書いてある事と言う訳ではないです。

アイコン作成に関して

例としてgmailのアイコンの説明

gmailのアイコン等は実際に紙を折って影の着き方等を参考にし作成されました。
アイコンとして形を作成し、決まっている光の方向(左、145度(photoshop参考))から影をおとしマテリアルの原型をつくりスポットカラーが配置されました。

アイコンの形を作成する用のグリッド(ガイド)に形を落とし込み作成されました。プロダクトアイコンを作成するのにグリッドが手助けをしてくれます。位置決めなど、規則性を持たせることができ、アイコンをまとめる事によりシステムに統一した雰囲気が出てきます。

Gmailのアイコンのスポットカラーは「赤」だと思うのですが。このスポットカラーの矩形には影を付けずに存在する場所によって陰影がついているのみで、アイコン上にはっきりさせています。

キーラインの種類に関して

キーラインを統一する事で、アイコンがまとまります。
Square
Height: 152dp
Width: 152dp

Circle
Diameter: 176dp

Vertical rectangle
Height: 176dp
Width: 128dp

Horizontal rectangle
Height:128dp
Width:176dp

DP グリッド

androidの推奨するアイコンは48dpで作成する事です。ですが実際にアイコンを作成する時は400%の192dp*192dp(角の丸みは4dp)で作成することを推奨しています。
これにより拡大縮小しても、きれいなエッジラインをのこせるようになります。
1:1の大きさではなく、4:1の大きさで作成する。

幾何学

円、正方形、長方形、垂直、および対角線:プリセットの基準は、特定のキーラインで決定されます。この小さなパレットは、製品のアイコンを統一します。

アイコンの構造

アイコンを解剖するとグラフィック要素で構成されています。この構成はロゴの微妙な特徴を表しています。また、基本構成を意識する事によって、ロゴデザインの学習になります。

コンポーネント

重なっているコンポーネントは1つ前の上に配置されています。
コンストラクチャの視点
アイコンの構造を斜めから観た例
それぞれ番号に名称がついています
1. 仕上げ
2. Material 背景:背景要素
3. Material 前景:背景に影を落として上に配置。
4. 色
5. 影

背景:背景要素
全景:背景の上に素材を乗せている
色:ごく一部の素材の色(ポイントカラー。gmailでいうならば、「M」の形とっている赤の事。)
宙に浮いている:色だとしたら隅々までひかれる(gmailでいうならば、アイコンのポイントカラーがつく前の原型の事。)
色付きの縁:素材の上の淵に白いテクスチャーか明るい色をオリジナルで用意するか。
影の淵:素材の下の淵に暗い色または暗いオリジナル色
影:柔らかい影をまとった隆起した素材。
仕上げ:全ての素材の上に左上右下へ影を落とす。

テーマ別色選別方法

色彩、覆い、影の値

色合いと陰影が追加されたときの各色が異なって反応します。すべてのエッジの色合い、エッジシェード、および影の色は、その背後にある各色ごとに調整する必要があります。色の調和を確保するために、それぞれについて適切な値を利用してください。

プロダクトアイコンのパターン

物理的な物質はいろいろな環境に影響を受け、表面と触感でのセンスは規則を作ります。相互作用でたくさんのユニークな構成物になります。

色の要素は、平らな紙の上に存在してください。
色の要素をエッジまたはシャドウで飾らないでください。

レイヤー

紙のレイヤー要素は深さを作り、エッジと影と持ちます。
重なる数に注意してください。
あまりにも複雑になるとフォーカスが欠けてしまいます。

昇降

シンプルな素材の上の中心部から影を伸ばします。
消して他のシェイプをクロップしないでください。

折り目を入れたマテリアルエレメントは幾何学的な要素を失わずに深さの感覚を持たせます。
折り目は中心を通り、形をシンメトリーにします。
中心でなかったり複数の折り目は使用しないでください

折りたたみ

折りたたみ要素は、見た目よりもおおきく歪みます。改変または重要な要素を詐称避けるのでスポットカラーの場所には、避ける。

重ね

オーバーラップ材料要素は、ユニークなシルエットを作成します。すべての要素、エッジ、シャドウはシルエットの内部に閉じ込められています。1つ以上のオーバーラップを超えないようにしてください。あまりにも多くを持つことは、アイコンを複雑にし、フォーカスを欠いてしまいます。

アコーディオン

折り畳まれた要素は単一の素材に次元を追加させます。ただし、2つ以上の折り目を超えないようにしてください。あまり階層を多く持つ事はアイコンを複雑にし階層を分からなくします。

ゆがみ

プロダクトアイコンは歪ませたりしてはいけません。エレメントは幾何学的な形をしていなくてはいけなくて、歪ませたり、傾けたり、伸ばしたりしてはいけません。

プロダクトアイコンを読んで

アイコンを歪ませると言う視点に関しては、デザイン上そう言う事もあるだろうなとは思うけれども、そもそもプロダクトアイコンとはどういったアイコンの事をマテリアルデザインではさすのかと言う視点から見るとと言う話なのでとてもなっとく。

そして、プロダクトアイコンも構造から考える。全て構造化。
アプリケーションである事を分かりやすく伝えるために、androidにインストールするアプリケーションに関しては規約をそろえるということなんですよね。

次は、システムアイコン。

Published by tomoka , on 8月 6th, 2015 at 10:47 pm. Filled under: Android,app,マテリアルデザインNo Comments
この記事を読む

マテリアルデザイン 色について

今日は色について勉強。
かなりひどい書きかけを修正しました。

カラーの指定をする時は、端末できれいに表示できる色を推奨しているようです。
マテリアルデザインのカラーページにはキーカラー用とアクセントカラー用の推奨カラーを記載しています。(http://www.google.com/design/spec/style/color.html)

キーカラー

原色を500として、プライマリカラーとアクセントカラーを記載しています。
※バージョンがA***となっているのは、アクセント用のカラーを指します。

色の選択方法

プライマリカラーとアクセントカラーをバージョンにAがついた2つ目のパレットから選択し、それぞれの色から3色相を選択することで、プライマリカラーとアクセントカラーの色使いを制限します。

透明度と重要度

style_color_uiapplication_alpha2 style_color_uiapplication_alpha1

テキストやアイコンの表示を他のテキストに比べていかに重要であるか伝えるために、テキストやアイコンの不透明度を変更して表現します。特にテキストはテーマを黒と白で選んだ時の透過度が変わります。
アルファ値の設定は明度でも彩度でもないので、色のバリエーションを増やすのみは指定しやすいのかなと思った。

暗い色のテーマ

Light text (#FFFFFF) Opacity
Primary text 100%
Secondary text 70%
Hint and disabled text and icons 30%

明るい色のテーマ

Dark text (#000000) Opacity
Primary text 87%
Secondary text 54%
Hint and disabled text and icons 26%

プライマリーカラーとアクセントカラーの指定

ツールバーとステータスバーの指定

  • ステータスバーの設定 プライマリカラーの700
  • ツールバーの設定 プライマリカラーの500

アクセントカラーの指定

  • アクションボタン、スイッチボタンの色に適応します。
  • テキストの場合。linkを設定するテキストのみなどにも利用します。

ここいらへんは、いままでのデザインの作り方とは大きくは変わらない。
コンバージョンを求める箇所に利用とかは良くつかってきたよね・・・・

アクセントカラーの特殊(?)なつかいかた

アクセントカラーの色の落とし方

アクセントカラーが機能できない場面に陥ったとき。例としてですが、アクセントカラーとして機能する為にはコントラストを十分に引き出す方向でアクセントカラーを作ります。
例えば、プライマリカラーの500が背景に使われてしまった場合、HSB色空間(Hue、Saturation、Brightness)のSaturation(彩度)を黒53% または 白100% にて調節してつかう。
画像は背景にプライマリカラーの500を使った場合で 黒53%
※ここら辺の言葉の意味が少し分からなかった・・・>< 英語力無い。

テーマに関して

アプリに一貫したテーマを選択します。明るいテーマと暗いテーマを用意してあります。
テーマは、明るいと暗いによって、表面の闇、影のレベル、およびインクの要素の適切な不透明度を指定できます。ページにテンプレートが用意されています。
http://www.google.com/design/spec/style/color.html#color-themes

いい加減、次の投稿の時にはCSS整えよう。
と、心に誓う。

Published by tomoka , on 7月 28th, 2015 at 11:50 pm. Filled under: AndroidNo Comments
この記事を読む

surfaceViewのcanvase run()終了時のnull問題

Surfaceviewを使ったとき、端末のバックキーを押すタイミングでアプリが強制終了するのはthreadの破棄の設定だけでなくcanvasのdrawcolorの時にonDestroy( )のタイミングでcanvasにがnullとして返って来てしまう事にやっと気が付いた。

実装した対策は、そもそもthreadがnullになっていないかどうかを分岐して、threadがnullの時はholder.lockCanvas();からholder.unlockCanvasAndPost(canvas);の中に書いた描画を実行しないようにしました。

surfaceCreated()でフラグを立てる /* boolean canvasFlag = true;
surfaceDestroyed()でフラグを折る /* boolean canvasFlag = false;

if(canvasFlag){
holder.lockCanvas();
/*画面の初期化。というか描画の準備のために白で塗りつぶす。
c.drawColor(Color.WHITE);



holder.unlockCanvasAndPost(canvas);
}

Published by tomoka , on 6月 11th, 2014 at 7:26 pm. Filled under: Android,app,java,smartphoneNo Comments
この記事を読む

独自、tweenの実装

viewでのアニメーションはプラグインを使いつつなんとか実装できたのですが、surfaceViewでのアニメーションの実装がうまく行かず、tweenの式を調べて移植してみました。
とりあえず、tweenしてくれました。ので、メモ書き。。。。

実行部分
[Mole.Obj.java]
float moleScale /*変化させたい数値
long passed_time /*経過時間
int mole_max_count /*変化を続ける時間
/*
* 第1引数:経過時間
* 第2引数:変化させたい数値の初期値
* 第3引数:変化させたい数値の最終値
* 第4引数:変化し続ける全体の時間
*/
moleScale = (float) TweenAnimation.easeOutCirc(passed_time,1,2,mole_max_count);

移植したメゾット
[TweenAnimation.java]
public class TweenAnimation {
float t;
float d;
float c;
float b;
    
/*とある1つのみ。Tweenerとかでも使っているtweenの式*/
static double easeOutCirc(float t,float b,float c,float d) {
t /= d;
t–;
return c * Math.sqrt(1 – t*t) + b;
};
}

passed_timeは[Mole.Obj.java]ないにmoleUpdate()を作って、常に変化させてます。
long old_time; /*最初の時間
public void moleUpdate() {
//時間の更新のみ
passed_time = System.currentTimeMillis() – old_time;
}

Published by tomoka , on 6月 11th, 2014 at 7:13 pm. Filled under: Android,animation,app,javaNo Comments
この記事を読む

Java Universal Tween Engineのalpha

最近はJava Universal Tween Engineを理解しようと必死なのですが、
そのなかで、メモにしておこうと思ったことが1点。

alphaはTween.set()が必要です。

Timeline.createSequence()
/*
* public static final int POSITION_X = 1;
* public static final int POSITION_Y = 2;
* public static final int POSITION_XY = 3;
* public static final int ROTATION = 4;
* public static final int SCALE = 5;
* public static final int ALPHA = 6;
*/
  //alpha値の設定
.push(Tween.set(cont, 6).target(0))
.push(Tween.to(cont, 6, 2.0f).target(1).ease(Back.OUT).delay(1.0f))

.push(Tween.to(cont, 4, 2.0f).target(360).ease(Bounce.OUT))
.push(Tween.to(cont, 1, 1.0f).target(3000).ease(Expo.OUT).delay(0.5f))
.push(Tween.call(callBack).delay(1.0f))
.start(tweenManager);

Published by tomoka , on 5月 19th, 2014 at 9:03 am. Filled under: Android,animation,app,java,smartphoneNo Comments
この記事を読む

java-universal-tween-engineのcallback

APIを見つけてからやっと、コールバックをとる事ができた。
長かった。。。。。

//インポートクラス
import aurelienribon.tweenengine.Timeline;
import aurelienribon.tweenengine.TweenCallback; ←受け取るクラス
import aurelienribon.tweenengine.TweenManager;

//コールバックイベントの登録
TweenCallback callBack = new TweenCallback(){
@Override
public void onEvent(int arg0, BaseTween arg1) {
// 処理
Log.v(“tag222”,String.valueOf(arg0));
TweenCallbackObj(); ←コールバック受け取り後に起動するメゾット。
}
};

//タイムラインの登録。
Timeline.createSequence()
.push(Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.push(Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.push(Tween.call(callBack).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.repeat(5, 500)
.start(tweenManager);

Published by tomoka , on 5月 18th, 2014 at 1:03 pm. Filled under: Android,app,smartphoneNo Comments
この記事を読む

ネイティブ アンドロイドアプリのフォントサイズの設定

デバイス文字を使う時の文字のフォントサイズの設定は、数値を決め打ちするよりもデザインした横幅を基準に設定すると便利でした。
他素材も、割合で設置したり素材を調節すると同じ素材を使い回しても問題なく、調節しやすかったです。

例えば、横480pxでデザインした場合は。。。。

WindowManager wm = (WindowManager)getSystemService(WINDOW_SERVICE);
Display disp = wm.getDefaultDisplay();

/*
*    横向きの画面にある事もあるのならば、ぶれないように小さい値をとる。
*     割合をだす。
*/
float block_size = Math.min(disp.getWidth(),disp.getHeight()) /480;

//デザイン上14pxだった場合。
paint.setTextSize (14 * block_size);
//デザイン上24pxだった場合。
paint.setTextSize (24 * block_size);

Published by tomoka , on 3月 16th, 2014 at 9:08 pm. Filled under: AndroidNo Comments
この記事を読む

衝突後の座標の更新メモ

衝突判定したら重なり分の半分をそれぞれの座標の数値に反映する。重なりに関しては、座標の差をだして、画像の大きさよりも小さくなった場合としてます。上下左右からぶつかるのですが、衝突した時の処理は[0]は引いて[1]は足しています。

float sakuraHeight_y = sakura[0].height_y – sakura[1].height_y;
float sakuraWide_x = sakura[0].wide_x – sakura[1].wide_x;

sakuraWide_x = Math.abs(sakuraWide_x);
sakuraHeight_y = Math.abs(sakuraHeight_y);

//桜の画角が30*30の場合
//重なっているときのみ座標の更新
if(sakuraHeight_y < 30 && sakuraWide_x < 30){
sakura[0].height_y = sakura[0].height_y – sakuraHeight_y/2 – 1;
sakura[0].wide_x = sakura[0].wide_x – sakuraWide_x/2 – 1;

sakura[1].height_y = sakura[1].height_y + sakuraHeight_y/2 + 1;
sakura[1].wide_x = sakura[1].wide_x + sakuraWide_x/2 + 1;
}else{
for(int iii = 0;iii<sakura.length;iii++){
//SakuraGravityクラスの複製:座標更新
sakura[iii].run(canvas,snow, newWidth,newHeight,sensorX,sensorY,sensorZ);
}
}

Published by tomoka , on 8月 8th, 2013 at 2:26 pm. Filled under: AndroidNo Comments
この記事を読む

ライブ壁紙第一弾

アンドロイドアプリ制作をはじめて気がついたらもう一年。。。。
プログラムの知識が無い自分がとりあえず、動く物を作り事ができたので報告です。

つくったもの
ライブ壁紙

アプリのないよう
1)背景がカラフルに変わる。
2)上から星が降ってくる。
3)タップした位置に星が表示

アプリのスクキャプ
タイミング悪くきれいな色をキャプチャできなかったけれども。。。。
RGBの数値を0~255の間を行き来しているだけです。星の落下に関しては、一応落下速度をつけているので、何度かループをしているうちにばらつきがでてきます。

すくきゃぷ_0000_ベクトルスマートオブジェクトすくきゃぷ_0001_ベクトルスマートオブジェクトすくきゃぷ_0002_ベクトルスマートオブジェクトすくきゃぷ_0003_ベクトルスマートオブジェクト

今回はプログラムだけでなく、いろいろ勉強しました。
アフィン変換、ラジアン、自由落下、三角関数。。。。

実はここまで作れたのは、自分だけの力ではありません。
助けて下さったみなさまに心より感謝しております。

Published by tomoka , on 6月 9th, 2013 at 11:36 pm. Filled under: Android,appNo Comments
この記事を読む

拡大して広がる星の座標

class Star{
int x;
int y;
}

star[i].x = (int) ((starX) + (Math.cos(degree[i])*(radius+itemTouch.getWidth()*ScaleSize*2)));
star[i].y = (int) ((starY) + (Math.sin(degree[i])*(radius+itemTouch.getHeight()*ScaleSize*2)));

sin cos にかける半径に画像の拡大した数値の半分をたして、拡大後の座標の調節。

Published by tomoka , on 6月 9th, 2013 at 11:23 pm. Filled under: Android,app,smartphone,調べものNo Comments
この記事を読む

スムーズスクロールのメモ

android2.3.4ではスムーズにスクロールできない場合、$()を追加したらうまく動いた!

追記した場所

// リンク先の画面上の位置を取得して、そこまでスクロール
$(‘html, body’).animate({scrollTop: $(target).offset().top});

Published by tomoka , on 3月 30th, 2013 at 8:34 pm. Filled under: Android,javascript,jQuery,smartphoneNo Comments
この記事を読む