2012-06-24

SublimeText2

Keyboard Shortcuts - Windows/Linux — Sublime Text Unofficial Documentation
Windows 版の Sublime Text 2 を使う | Steppin' out
http://d.hatena.ne.jp/mizchi/20111021/1319167480
wks: Sublime Text 2でCoffeeScriptのコンパイルをするバッドノウハウ
 readyStudyGo: Sublime Text 2のカスタマイズ
 http://publicdraft.studiomohawk.com/research/2012/04/14/01-02-sublimetext2/

パッケージ

IndentGuides インデントに合わせてガイド線を表示
DocBlockr関数を書いたあとに関数コメントを自動記述！

Pressing enter or tab after /** (or #*** for Coffee-Script) will yield a new line and will close the comment.
If you press shift+enter after the opening /** then the docblock will be inserted inline.

AlignmentPress ctrl+alt+a on Windows and Linux, or cmd+ctrl+a on OS X
BracketHighlighter括弧のハイライト
CodeIntel自動補完の強化？
SublimeLinter構文チェック
ZenCoding TabかCtrl+Spaceで補完コマンド一覧
- Ctrl + Shift + T タグ内を選択
- Ctrl + Alt + Return 入力コンソールを表示

TIPS

ctrl+P ファイル一覧から選択
ctrl+P、#や@でクラス名など。:数字で行番号。
ctrl+/ コメント
ctrl+shit+P Package Control起動
Package ControlでBrowse Packagesでパッケージのフォルダを開ける
shift+右ドラッグ矩形選択
ctrl+d 同じ文字列を選択し編集
ctrl+x(ctrl+k) 行の削除
ctrl+alt+↑↓　複数行の編集
ctrl+l 行の選択
ctrl+shift+l 選択行の編集
ctrl+w ファイルを閉じる
alt+shift+数字分割（グループ）
ctrl+shift+数字現在のファイルを対応するグループに移動
ctrl+数字グループの切り替え

2012-06-12

Javascript・CoffeeScriptの学習に見たサイトのまとめ

プログラム CSS HTML JavaScript CoffeeScript jQuery Backbone.js Node.js Express.js SQL

随時追記していく。
以前書いた↓も参考に。一部被るところもあり
Webページ制作のための参考サイト集 - にゃーん

気になったライブラリたち

スクロール

ブロックのスクロール実装を便利にするJavaScriptライブラリ「jsScrolling」:phpspot開発日誌
 JAVASCRIPT MOTION TWEEN
こだわりのページ内リンクスムーズスクロール scrollsmoothly.js - KAZUMiX memo
コンテンツのスクロールをクールに行える「jquery.scrollable.js」:phpspot開発日誌
 これはなかなかすばらしい

スクロール？？？

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌
 ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌

2012-05-28

Physics2Dの質量に関するサンプル

プログラム PSS Vita

PS Suite SDKの話。
Physics2Dのサンプルとしてある、Physics2DSample。
その中の、
MassUnstableScene(質量差によってシミュレーションに不安定が生じるサンプルシーンです。)
DifferentMassScene(異なる質量だけど同じ速度のサンプルシーンです。)
LargeSmallScene( 同じ質量でも長さスケールが違うことによって見た目の速度感が変わるサンプルシーンです。)
について。

MassUnstableScene

教訓

軽い剛体の上に、重い剛体を置くと不安定になる。

サンプルの内容

剛体の色	黄	青	緑
重さ	1Kg	10Kg	100Kg

結果

左	上から軽い順に積まれている	安定
右	上から重い順に積まれている	不安定。崩れる。

DifferentMassScene

教訓

異なる質量でも重力だけなら同時に落下する。

物理のお話。

サンプルの内容

剛体	左	真ん中	右
重さ	1Kg	10Kg	100Kg

空気抵抗(PhysicsBody.airFriction)は初期設定の0のまま。

LargeSmallScene

教訓

同じ速度でも見せ方によって速度感が変わる。

サンプルの内容

左右で異なるのはスケールを変えただけ。(ボックスの質量も同じ。内容には関係ないが。)
上のサンプルからわかるように、ボックスの速度も同じ。
結果として
スケールを小さくした右の方が早く着地する。

2012-05-28

Physics2DのChangeTensorScene

プログラム PSS Vita

PS Suite SDKの話。
Physics2Dのサンプルとしてある、Physics2DSample。
その中の、
ChangeTensorScene(慣性テンソルをデフォルト計算から変更したサンプルシーンです。)
について。

慣性テンソルとは

さっぱり。検索すると物理の難しい単語がいっぱい。
しかし、冒頭の[Tips and notice]にある程度説明があったので。
とりあえず全文(誤字はそのまま)

Inertia tensor defines how much easy the rigid boy is to start to rotate
and how difficult it is to stop rotating.
When this value is large, it is not easy for rigid body to start to rotate.
But once that it starts to rotate, it is not easy for it to stop rotating.
On the other hand when this value is small, it is easy for rigid body to start to rotate.
But even if it starts to rotate, it is easy for it to stop rotating.
Please notice that it is necessary to update invInertia at the same time
when you change inertia parameter to avoid confliction of parameters.

google翻訳を駆使した意訳(間違ってるかもしれないので注意を。)

慣性テンソルでは剛体の回転しやすさと止まりにくさを定義します。
値が大きいとき、回転しにくいです。
ですが、一度回転すると、止まりにくいです。
逆に値が小さいとき、回転しやすいです。
しかし同様に止まりやすいです。
inertiaとinvInertiaと同期していないといけないので、
片方を変更したら対応するようにもう一方を変更してください。

float inertia = 0.0f
剛体のテンソル
剛体のテンソルはテンソルの逆数と同期していないといけない

float invInertia = 0.0f
剛体のテンソルの逆数
剛体のテンソルの逆数はテンソルと同期していないといけない

サンプルの内容

画像の左はデフォルト。
真ん中

sceneBodies[numBody].inertia *= 0.1f;
sceneBodies[numBody].invInertia *= 10.0f;

右

sceneBodies[numBody].inertia *= 10.0f;
sceneBodies[numBody].invInertia *= 0.1f;

実行すると

左	一回転	特に。
真ん中	良く回っている	回転の割に左と同時くらいに止まる
右	揺れるくらい	最後までゆらゆらしてる

といった感じ。
なかなか使いどころが難しそう。

2012-05-28

Physics2DのCreateRagdollScene

プログラム PSS Vita

PS Suite SDKの話。
Physics2Dのサンプルとしてある、Physics2DSample。
その中の、
CreateRagdollScene(Ragdollの基本的な生成方法を示したサンプルシーンです。)
について。

[Tips and notice]

まず全文。

This sample shows the way to create very simple ragdoll style object.
Ragdoll is composed of many primitives. (boxes and spheres)
You can determine which parts has collision detection inside one ragdoll by AddIgnorePair(...).
This is more convenient to construct the ragdoll compared with usual collision filter or group filter.
But should be care about the fact that a lot of ignorePair makes the performance of broadphase become worse.
And once that the interpenetration happens, then it is difficult for the ragdoll to restore the original relative position
if there are a lot of ignorePair inside the ragdoll.
(interpenetration free means that it is also easy for the ragdoll to restore the original position
because there is no collision detection and it is free for any parts of the ragdoll to go forward and go back.)

google翻訳を駆使した意訳(間違ってるかもしれないので注意を。)

このサンプルでは簡単なラグドールの作成の方法を紹介します。
ラグドールは多くのプリミティブで構成されます。
AddIgnorePair(..)を使って、ラグドール内でどこに衝突検出を持つのか決めることが可能です。
この方法の方が、Filterを使うよりもラグドール作成において便利です。
しかし、多くのignorePairはパフォーマンスを悪くするので気を付けてください。
また、ignorePairを使用し、万一ラグドールがこんがらがってしまったとき、元に戻るのが困難ですので注意してください。
(衝突検出をけせば、衝突することがないので重なってもこんがらがることがないし、元に簡単に戻ります。)

作成手順

PhysicsShapeの作成
頭と体
左上部
右上部
左下部
右下部
一部の衝突を消す

PhysicsShapeの作成

151行目から

// body center
Vector2 body_width = new Vector2(2.0f, 2.5f);
sceneShapes[4] = new PhysicsShape(body_width);
// head
float head_width = 1.5f;
sceneShapes[5] = new PhysicsShape(head_width);
// arm 1, 2
Vector2 arm_width = new Vector2(1.5f, 0.75f);
sceneShapes[6] = new PhysicsShape(arm_width);
// hand
float hand_width = 0.75f;
sceneShapes[7] = new PhysicsShape(hand_width);
// leg 1, 2
Vector2 leg_width = new Vector2(0.75f, 2.0f);
sceneShapes[8] = new PhysicsShape(leg_width);

PhysicsBodyの作成

頭と体を作成し、Jointでつなげる。
219行目から

// create body
Vector2 center_pos = new Vector2(-10.0f + 20.0f * i, 5.0f);
				
sceneBodies[numBody] = new PhysicsBody(sceneShapes[4], 5.0f);
sceneBodies[numBody].position = center_pos;
//一部省略				

// create head
sceneBodies[numBody] = new PhysicsBody(sceneShapes[5], 1.0f);
sceneBodies[numBody].position = center_pos + new Vector2(0.0f, body_width.Y) + new Vector2(0, head_width);
//一部省略	
	
// creat joint between body and head
bodyA = sceneBodies[body_index];
bodyB = sceneBodies[head_index];
sceneJoints[numJoint] = new PhysicsJoint(bodyA, bodyB, bodyB.position + new Vector2(0.0f, -head_width), (uint)body_index, (uint)head_index);
sceneJoints[numJoint].axis1Lim = new Vector2(1.0f, 0.0f); //移動はしない
sceneJoints[numJoint].axis2Lim = new Vector2(0.0f, 1.0f);
sceneJoints[numJoint].angleLim = 1;
sceneJoints[numJoint].angleLower = PhysicsUtility.GetRadian(-10.0f); //10度の回転を許可
sceneJoints[numJoint].angleUpper = PhysicsUtility.GetRadian(10.0f);
numJoint++;

左上部

247行目から。
arm1(肩から肘)、arm2(肘から手首)、handを作成しJointでつなげる。

// create left arm1					
sceneBodies[numBody] = new PhysicsBody(sceneShapes[6], 1.0f);
sceneBodies[numBody].position = center_pos + new Vector2(-body_width.X, 0.5f*body_width.Y) + new Vector2(-arm_width.X, 0.0f);
//一部省略	
				
// creat joint between body and left arm1 体とくっつける				
bodyA = sceneBodies[body_index];
bodyB = sceneBodies[larm1_index];
sceneJoints[numJoint] = new PhysicsJoint(bodyA, bodyB, bodyB.position+ new Vector2(+arm_width.X, 0.0f), (uint)body_index, (uint)larm1_index);
sceneJoints[numJoint].axis1Lim = new Vector2(1.0f, 0.0f); //移動はしない
sceneJoints[numJoint].axis2Lim = new Vector2(0.0f, 1.0f);
sceneJoints[numJoint].angleLim = 1;
sceneJoints[numJoint].angleLower = PhysicsUtility.GetRadian(-45.0f); //45度の回転を許可
sceneJoints[numJoint].angleUpper = PhysicsUtility.GetRadian(45.0f);
numJoint++;
					
// create left arm2	
sceneBodies[numBody] = new PhysicsBody(sceneShapes[6], 1.0f);
sceneBodies[numBody].position = center_pos + new Vector2(-body_width.X, 0.5f*body_width.Y) + new Vector2(-arm_width.X, 0.0f) + new Vector2(-2.0f*arm_width.X, 0.0f);
//一部省略	
			
// creat joint between left arm1 and left arm2	腕同士をくっつける			
bodyA = sceneBodies[larm1_index];
bodyB = sceneBodies[larm2_index];
sceneJoints[numJoint] = new PhysicsJoint(bodyA, bodyB, 0.5f*(bodyA.position + bodyB.position), (uint)larm1_index, (uint)larm2_index);
sceneJoints[numJoint].axis1Lim = new Vector2(1.0f, 0.0f); //移動はしない
sceneJoints[numJoint].axis2Lim = new Vector2(0.0f, 1.0f);
sceneJoints[numJoint].angleLim = 1;
sceneJoints[numJoint].angleLower = PhysicsUtility.GetRadian(-45.0f); //10度の回転を許可
sceneJoints[numJoint].angleUpper = PhysicsUtility.GetRadian(45.0f);
numJoint++;
					
// create left hand
sceneBodies[numBody] = new PhysicsBody(sceneShapes[7], 1.0f);
sceneBodies[numBody].position = center_pos + new Vector2(-body_width.X, 0.5f*body_width.Y) + new Vector2(-4.0f*arm_width.X, 0.0f) + new Vector2(-hand_width, 0.0f);
//一部省略	
					
// creat joint between left arm2 and left hand	腕と手をくっつける			
bodyA = sceneBodies[larm2_index];
bodyB = sceneBodies[lhand_index];
sceneJoints[numJoint] = new PhysicsJoint(bodyA, bodyB, bodyB.position + new Vector2(hand_width, 0), (uint)larm2_index, (uint)lhand_index);
sceneJoints[numJoint].axis1Lim = new Vector2(1.0f, 0.0f); //移動はしない
sceneJoints[numJoint].axis2Lim = new Vector2(0.0f, 1.0f);
sceneJoints[numJoint].angleLim = 1;
sceneJoints[numJoint].angleLower = PhysicsUtility.GetRadian(-10.0f); //10度の回転を許可
sceneJoints[numJoint].angleUpper = PhysicsUtility.GetRadian(10.0f);
numJoint++;

右上部

左下部

右下部

内容は違っても方法は一緒なので省略。

一部の衝突を消す

PhysicsScene.AddIgnorePairを使用して衝突検出を消す

void AddIgnorePair (uint index1, uint index2)
衝突を無視するペアをリストに加える

index1 剛体ペアの一方

index2 剛体ペアのもう一方

index1	剛体ペアの一方
index2	剛体ペアのもう一方

まず左のラグドール。

449行目から。

AddIgnorePair((uint)body_index, (uint)head_index);   //体・頭
					
AddIgnorePair((uint)body_index, (uint)rarm1_index);  //体・右腕1
AddIgnorePair((uint)rarm1_index, (uint)rarm2_index); //右腕1・右腕2
AddIgnorePair((uint)rarm2_index, (uint)rhand_index); //右腕2・右手

AddIgnorePair((uint)body_index, (uint)larm1_index);  //左上部で上と一緒
AddIgnorePair((uint)larm1_index, (uint)larm2_index);
AddIgnorePair((uint)larm2_index, (uint)lhand_index);

AddIgnorePair((uint)body_index, (uint)rleg1_index);  //体・右足1
AddIgnorePair((uint)rleg1_index, (uint)rleg2_index); //右足1・右足2

AddIgnorePair((uint)body_index, (uint)lleg1_index);  //左下部で上と一緒
AddIgnorePair((uint)lleg1_index, (uint)lleg2_index);

この状態では、足同士の判定衝突は残ったまま。
強い力がかかった時に、万一足が絡まってしまうと、元に戻るのは困難。

真ん中のラグドール

469行目から。

sceneBodies[body_index].collisionFilter = 1;
sceneBodies[head_index].collisionFilter = 1;
sceneBodies[larm1_index].collisionFilter = 1;
sceneBodies[larm2_index].collisionFilter = 1;
sceneBodies[lhand_index].collisionFilter = 1;
sceneBodies[rarm1_index].collisionFilter = 1;
sceneBodies[rarm2_index].collisionFilter = 1;
sceneBodies[rhand_index].collisionFilter = 1;
sceneBodies[lleg1_index].collisionFilter = 1;
sceneBodies[lleg2_index].collisionFilter = 1;
sceneBodies[rleg1_index].collisionFilter = 1;
sceneBodies[rleg2_index].collisionFilter = 1;

collisionFilterをすべてのパーツに適用。
体の中で衝突はしない。
比較的安定するようになる。

最後の右のラグドール

487行目から。
衝突はすべて行われる。
そのせいでとても不安定。テストのためだけに使う。

2012-05-27

Physics2DのQueryContactScene

プログラム PSS Vita

PS Suite SDKの話。
Physics2Dのサンプルとしてある、Physics2DSample。
その中の、
QueryContactScene(Contact Queryを用いて衝突情報を得るサンプルシーンです。)
について。

このサンプルでは、特定の剛体の衝突を知ること方法の紹介。

使用するのは

PhysicsScene.QueryContact(..)

bool QueryContact (uint index1, uint index2)
２つの剛体の間に衝突があったかどうかの記録を調べる

index1 剛体ペアの一方

index2 剛体ペアのもう一方

戻り値剛体ペアに衝突があった記録があれば真を返す

index1	剛体ペアの一方
index2	剛体ペアのもう一方
戻り値	剛体ペアに衝突があった記録があれば真を返す

indexは剛体のindexなので
sceneBodies[ index ]のindexを使用する。

サンプルでは

184行目からのInitSceneの中で

coll_target1 = numBody;
sceneBodies[numBody] = new PhysicsBody(sceneShapes[2], 1.0f);
//色々設定
numBody++;

202行目から

coll_target1 = numBody;
sceneBodies[numBody] = new PhysicsBody(sceneShapes[2], 1.0f);
//色々設定
numBody++;

278行目のDrawAllBodyの中で

bool isCollision = QueryContact((uint)coll_target1, (uint)coll_target2);
//trueなら色を変えている

といった形で使用している。

補足

PhysicsSceneには

int numPhysicsSolverPair = 0
narrow phase衝突判定により衝突するペア数

PhysicsSolverPair[] solverPair = new PhysicsSolverPair[maxContacts]
シーン中の衝突ペアリスト

がある。
Physics2Dのサンプルでは
DrawAdditionalInfo(..)の中で

for (uint i = 0; i < numPhysicsSolverPair; i++)
{
  //solverPair[ i ].resAなどで衝突点の描画をしている。
}

そして、
PhysicsSolverPairは

uint GetIndexA ()
ペアの剛体Ａのインデックスを返す
uint GetIndexB ()
ペアの剛体Ｂのインデックスを返す

といった関数もあるので、これで特定の剛体の衝突を検出することも可能。
実際に、
QueryContactの中を見ると工夫はしてあるが、
solverPairを使用して結果を返している。

2012-05-27

Physics2DのScenePropertyScene

プログラム PSS Vita

PS Suite SDKの話。
Physics2Dのサンプルとしてある、Physics2DSample。
その中の、
ScenePropertyScene(シーン特性の指定の仕方を示したサンプルシーンです。)
について。

このサンプルでは、
PhysicsSceneの変数をいじってシーンの特性を指定する。

サンプルの内容

他のサンプルと同じく基本のシーンを作成。かべも。
その中にボックスと球を作成。
Change_SceneProperty関数で3種類のシーン特性を作成。
実行時に□ボタンを押すと、特性を切り替える。

使用する変数

4つ。

float penetrationRepulse = 0.2f
めり込みに対する反発力の加速係数

めり込んだ時にどれだけ戻すのか

float penetLimit = 0.03f
めり込みに対する許容度

一定値以下のめり込みを無視する。

float tangentFriction = 0.3f
反発に対する接線方向の摩擦係数

横方向の摩擦

float restitutionCoeff = 0.0f
反発に対する反発係数

衝突時の反発

3種類の特性

(誤字はサンプルのまま)
Default scene
デフォルト値のシーン。よく使われ比較的安定する。

penetrationRepulse = 0.2f;
penetLimit = 0.03f;
tangentFriction = 0.3f;
this.restitutionCoeff = 0.0f;

Very bummpy scene
でこぼこ。サンプルではよく跳ねる。

penetrationRepulse = 0.5f;      //めり込んだらよく跳ねかえす。
penetLimit = 0.0f;              //めり込みの許容度をけす
tangentFriction = 0.1f;
this.restitutionCoeff = 0.90f;  //良く跳ねる状態に

Very slippy scene
良く滑る。

penetrationRepulse = 0.2f;
penetLimit = 0.03f;
tangentFriction = 0.0f;       //横の摩擦をけす。
this.restitutionCoeff = 0.0f;

補足

このサンプルでは紹介されていないが、
シーンの特性を指定するものとして
PhysicsSceneに

Vector2 gravity = new Vector2(0, -9.8f)
シーン中の重力加速度

もある。

パッケージ

TIPS

HTML

backbone.js

Node.js

Express.js

気になったライブラリたち

スクロール

スクロール？？？

MassUnstableScene

教訓

サンプルの内容

DifferentMassScene

教訓

サンプルの内容

LargeSmallScene

教訓

サンプルの内容

慣性テンソルとは

サンプルの内容

実行すると

[Tips and notice]

作成手順

PhysicsShapeの作成

PhysicsBodyの作成

左上部

右上部

左下部

右下部

一部の衝突を消す

まず左のラグドール。

真ん中のラグドール

最後の右のラグドール

使用するのは

サンプルでは

補足

サンプルの内容

使用する変数

3種類の特性

補足