Clarifaiサンプル2

アパレルに特化させています

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Clarifaiサンプル</title>
  </head>
  <body>
    <h1>Clarifaiサンプル</h1>
<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
<script type="text/javascript" src="const.js"></script>

<form>
	<input type="file" id="files">
 
</form>

<div id="result"></div>
<p id="textul"></p>

<script type="text/javascript">
var ul = document.getElementById('textul');
var li;
//test2
//function poop() {
	document.getElementById('files').addEventListener('change', function(){
//document.querySelector('input').addEventListener('change', function(){
	
    var reader = new FileReader();
	//reader.readAsDataURL(file);
    reader.onload = function() {
      var imageData = this.result;
	  var imageData2 = this.result;
      document.getElementById('result').innerHTML = '<img src="'+ imageData +'" />';
      imageData = imageData.replace(/^data:image\/(.*);base64,/, '');
      doTheyEvenLift(imageData);
    };
    reader.readAsDataURL(this.files[0]);
  }, false);
//}

function doTheyEvenLift(image) {
app.models.predict('e0be3b9d6a454f0493ac3a30784001ff', {base64: image}).then(function(r) {
    console.log(r.outputs[0].data.concepts);
	var mycount = r.outputs[0].data.concepts.length;
	for(var i=0; i < mycount; i++){
		li = document.createElement("li");
		var p = r.outputs[0].data.concepts[i].value;
		p = p * 100;
		li.textContent = r.outputs[0].data.concepts[i].name +"_"+ p + "%";
		//li.textContent = r.outputs[0].data.concepts[i].value;
		ul.appendChild(li);
	}
  }, function(err) {
    console.log(err);
  });
}
	


///////test2

</script>

  </body>
</html>

実働サンプル(毎回リロード)

http://filmm.info/clari/claritest.html

TPSキャラクターをタップした先に移動(2)

AIThirPersonContorollerを配置

  1. 次にステージ上にAIThirPersonContoroller(Asset内のStandardAssets>Characters>ThirdPersonCharacter>Prefab内にある)をPlane上にドロップする
  2. 次にMultiPuroposeCameraRig(Asset内のStandardAssets>Camera>Prefabsにある)をHierarchyにドロップする
  3. Hierarchyに入れたMultiPuroposeCameraRigを選択し,InspectorのTargetにAIThirPersonContorollerをドロップする(TargetがAIThirPersonContorollerになる)
  4. HierarchyにあるMainCameraを削除する
  5. 再生して確認してみる

Assetのダウンロード

  1. タップ移動用のキットをここからダウンロードし,UnityのImportPackage>CustomPackageで読み込む

TapMoveAssetの使用

  1. Asset内にTapMoveフォルダが作成されているので,その中のredCircleを選択する
  2. (この項目は設定済みの場合は飛ばしてください)InspectorでAlpha Source(アルファ=透明チャンネルのこと)でInput Texture Alphaを選択し,Applyをクリックする.これでテクスチャの透明が使用できるようになる
  3. HierarchyのAIThirPersonContorollerにTapMoveフォルダ何のtapMove.csを追加する
  4. 追加されたスクリプトのCirclePreにCirclePrefabをアサインし,RayLengthに10〜50の数字を入力する
  5. ゲームを再生し確認すること

参考動画

もどる

TPSキャラクターをタップした先に移動(1)

ワークフロー

  1. AIの利用について
  2. TPSのAIつきキャラクターを配置する
  3. マルチカメラを配置し,ターゲットにTPSのキャラクターを設定する
  4. MainCameraを削除する
  5. カスタムパッケージを読み込む
  6. tapMoveスクリプトをAIThiredPersonControllerにアサインする

という流れです

AIの利用について

  • ここでいう「AI」は最近流行の機械学習などではなく,経路探索アルゴリズムA*を利用する
  • UnityではAIの歩行可能な場所とそうでない場所とを判定させるNavMeshという機能を用いる

NavMeshの設定について

  1. NavMeshの理解のために,テストシーンを作成し確認してみる
  2. まずPlaneを配置し,その上にCubeなどを障害物として置く
  3. Window>Navigation を選択しNavigationの設定を呼び出す
  4. Planeを選択し,次にNavigationのObjectタブを選択し,Navigation Staticにチェックを入れ,Navigation AreaはWalkableにする
  5. この設定は,このPlaneが歩行可能にするという意味
  6. 次に障害物(Cubeなど)を選択し,Navigation Staticにチェックを入れ,Navigation AreaはNot Walkableにする
  7. これでCubeは歩けないエリアとなる
  8. 全てのオブジェクトの設定が終わったら,NavigationBakeのタブを選択し,Bakeボタンをクリックする
  9. これでNavMeshの準備は完了

(次:AIキャラクターを配置

 

NCMBに座標を送る

急ぎなのでメモ ボタンで追加できる

	public void addBtn(){

		NCMBObject posObj = new NCMBObject ("posObj");

		//DicAdd test
		posObj .Add("x", "3.2");
		posObj .Add("y", "1.0");
		posObj .Add("z", "0.2");
		posObj.SaveAsync ((NCMBException e) => {      
			if (e != null) {
				//エラー処理
			} else {
				//成功時の処理
			}
		});
			}

 

MayaでPython(3)

繰り返し処理

以下のコードを新しく作成したファイルに記述し,test2.py で保存せよ

import maya.cmds as mc
for i in range(5):
 mc.polyCube(w=0.5, h=0.5, d=0.5, sx=1, sy=1, sz=1)
 mc.move( i, 0, 0 )

 

ブロック

Pythonの場合,ブロックはインデント(行頭からの空白)で判定する.スペースやタブを使うとよい

import maya.cmds as mc
for i in range(5):
 mc.polyCube(w=0.5, h=0.5, d=0.5, sx=1, sy=1, sz=1)
 mc.move( i, 0, 0 )
 print("for")
print("not for")

実行結果は

for

for

for

for

for

not for となる


実験1

以下のスクリプトを実行してみること.

import maya.cmds as mc
for i in range(10):
 for n in range(10):
  mc.polyCube(w=0.5, h=0.5, d=0.5, sx=1, sy=1, sz=1)
  mc.move( i, 0, n )

in変数である

各Cube間の間隔を広げる場合は, 4行目と5行目の間に i = i +1 を書き足すこと.ブロックの(空白の下図)は前後と同じにすること

ミニ課題

10個×10個×10個のCube又はSphereを生成するスクリプトを作成せよ(下図参考)

 

ミニ課題

1000個のCubeが少しずつ傾いているスクリプトを作成せよ(下図参考)

レンダリング例

戻る

MayaでPython(2)

移動

作成したオブジェクトを移動する

作成したオブジェクトを一旦削除し,スクリプトの最後の行に

mc.move( 3, 3, 3 )

を追加し実行する.

 

その他のコマンド

ポリゴン球を作成

mc.polySphere(r=2 ,sx=10, sy=10)

rは半径

ポリゴン円錐を作成

mc.polyCone(r=1, h=3, sx=10, sy=10, sz=10)

hは高さ

ポリゴン円柱を作成

mc.polyCylinder(r=0.3, h=6, sx=6, sy=6, sz=2)

 

回転

mc.rotate( 45, 10, 20)

または

mc.rotate( '45deg', 0, 0)

 

もどる)(つぎへ

MayaでPython(1)

スクリプト

Mayaにはスクリプトでコントロールできるシステムがある.

主にMELスクリプトとPythonスクリプトの2種が使用できる.MELは以前から使用されてきたため情報は豊富である.一方でPythonは汎用性が高く記述もシンプルなため,近年人気が高まっている.YoutubeやInstagramなどに使用されているほか,ディープラーニングなどにも応用されている.

今回は汎用性の高いPythonを用いて簡単なコーディングを体験してもらう.

ワークフロー

スクリプトをメモ帳などに記述し,保存.このファイルをMayaのスクリプトエディタで開き実行する


作成1

テキストエディタ(メモ帳などで可)の1行目に

import maya.cmds as mc

と記入し,ファイル名を test1.py (※今回は拡張子を書き換えてかまわない)と保存する.

mcという名前でmayaのシステムを読み込む の意味

実行

Mayaに戻り,右下のスクリプトエディタボタンをクリックし,スクリプトエディタを開く.

このファイルを実行する

スクリプトエディタを開き,ファイル>スクリプトのロード>(保存したファイルを選び)開く を選択

スクリプトを実行ボタンをクリックする

今回は何も起こらないので次に進む


コメント

コメントは行頭に#をつける

import maya.cmds as mc
#mcという名前でmayaのシステムを読み込む

コメント行はプログラム実行時に無視される

 

ポリゴンのcubeを作成する

import maya.cmds as mc
#mcという名前でmayaのシステムを読み込む
mc.polyCube()

デフォルト設定のCubeが作成される

 

数値を指定して作成する

作成したCubeを削除する

3行目を

mc.polyCube(w=1, h=1, d=1, sx=2, sy=2, sz=2)

に変更する.変化の違いを確認する.

w,h,dは幅(width),高さ(height).奥行き(depth)の値

sxはsubdivide のx方向の意味で,sy,szも同様

 

練習

幅3,高さ5,奥行き2,x方向の分割2,y方向の分割4,z方向の分割1のCubeを作成せよ

次へ

レベルデザイン

レベルデザイン

ゲームの難易度をデザイン(設計)すること

概要

  • もしもスーパーマリオブラザーズの1−1が激ムズだったら?
  • もしもドラクエの敵が30分以上出てこなかったら
  • Match3系のパズルゲームが3連結ではなく9連結だったら

およそのゲームは,導入部は簡単にチャレンジできるようにしている.その導入部からユーザにどう楽しんでもらえるか?を,意匠性(見た目)や,音やエフェクトやルールなどを考えることを一般的にレベルデザインと言う.

また,ターゲットとするユーザの習熟度や年齢層,性別に応じても設計する必要があり,マーケティングとも兼ね合ってくる.

ここでは,地形や障害物の配置といった手法で,ポイントへどう誘導するかを検討する.

例1:道で誘導

地形に道を描くことで行くべき方向を指し示す

例2:障害物などで隠す

木や建物などで隠したり,洞窟の入り口を表示させることで,そこへ行ってみたくなる衝動を誘発させる

例3:ギリギリでマップなどに表示させる

見つけにくポイントも,マップを表示することで行きやすくなる.ゲームスタート時にマップに何も表示させなくても,多少動かすことで行き先がマップに表示されるなどの工夫が必要

例4:ドアや階段を設置する

階段やドアなどのユーザの行動をアフォーダンスする物を配置することでユーザの行動コントロールする

制作

  1. 現在(改善前)の全体像をスクリーンショットなどで保存する
  2. 初見で2分程度でクリアできるように,空間のデザインを検討する
  3. 必ず他の人にプレイしてもらい,その様子を観察して設計者の思惑どおりに行かなかった部分(難しかった,易しかった)を観察しメモなどしておくころ
  4. 最初の案,改善案を元にレポートをしてもらう予定(次回以降に指示)

Clarifai使い方

2017年11月現在のClarifai使用方法

用意するもの

3つのファイルを用意してサーバにアップロードしてください

  • WEB表示用のHTMLファイル
  • 実行用のjsファイル
  • 解析用画像

このほかにCLIENTキーが必要とかなんとか,,(詳細はここ)これなしでも動いてるけど,,,

HTMLファイル

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Clarifaiサンプル</title>
  </head>
  <body>
    <h1>Clarifaiサンプル</h1>
<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
<script type="text/javascript" src="const.js"></script>


  </body>
</html>

 実行用のjsファイル

// instantiate a new Clarifai app passing in your api key.
const app = new Clarifai.App({
 apiKey: 'Your API KEY'
});

// predict the contents of an image by passing in a url
app.models.predict("e0be3b9d6a454f0493ac3a30784001ff",'YOUR IMAGE URL').then(
  function(response) {
    console.log(response);
  },
  function(err) {
    console.error(err);
  }
);

Your API KEYの部分には自分の作成したAPIキーを

YOUR IMAGE URLには自分のURLを

画像

画像を同じサーバに保存して実行

実行結果はWEBのコンソールに表示されます

Denim Jacket 91.7%

Peacoat 80.8%という結果が表示されています

このデータを自動的にWEBに表示するには

ObjectデータをJsonで解析する方法と,InnetHTMLあたりで実行できるかも

参考ページ