カテゴリー別アーカイブ: BlippAR

BlippAR 02

標準

BlippARアプリにいれる基本プログラム

package.jsonはだいたいどれにも共通なので割愛(前記事参照

main.jsについて

最初のBlipp例~基本

var blipp = require('blippar').blipp; //blipparクラスをすべて読み込み
var scene = blipp.addScene(); //最低ひとつのシーンが必要なので、シーンを世界に追加

// Scene creation
scene.onCreate = function() {
    var Plane = scene.addSprite().setColor('#ff7d32aa').setScale(400);
//  スプライト(枠)を追加する。色アルファを設定。スケールサイズを設定(400ピクセル四方)
}

両方のファイル(main.jsとpackage.json)をUTF-8で保存し、iTunesを通して、iOSデバイスに転送する。

公式チュートリアルにある、マーカー図形(下図)をBlipparアプリで覗くと、最初に設定されていた結果(マインクラフトっぽいデモデータ)と違う、薄いオレンジの四角形がマーカーの上に浮かび上がる。

m4__page_4

Blipparアプリで見た状態(下図)

blippar01

===============

何番目かのチュートリアルで、デバイスのスクリーン上に画像を貼り付けるという事例があり、その中で、setType(‘aura’) というのがあったので、setTypeについて

setType

 setType(’hider’ (default), ‘phantom’, ‘aura’, ‘solid’ or ‘sensor’)とは
奥行きバッファーをどう使うかを指定する
hider(デフォルト)はアルファが透過しない
aura は奥行きバッファーを考慮しない。したがって、オブジェクトは前面に描かれる。
phantom は奥行きバッファーを試すが、描かれない。つまり、後ろに配置されたものも描画される。
solid は奥行きは考慮されるがアルファは有効にならない。
sensor  は一切描かれない。

getScreenOrientation

getScreenOrientation(): 0 = Portrait, 90 = landscape left, 180 = upside down, 270 = landscape right
Returns number
.
getScreenHeight(): Height of the screen in pixels. This will ALWAYS be the narrow dimension of a rectangular screen
長方形スクリーンの細いほうの高さ(ピクセル単位)

setClickable

setClickable(boolean): Either true or false. Default is true Returns this.

 使い方 model.setClickable(false)

 

addScene

addScene(name): Add a scene with optional name in case of multiple scenes
Returns node
.
defaultという名前のシーンは必ずスタート時に必要。
シーンに名前を設定しておき、そのシーンに飛べ、という命令を出せそう

Parameter

name: optional name of the scene to create and add to the blipp

Usage
var scene = blipp.addScene('default')

addTransform

addTransform(name): Attach an invisible Transform to this node
Returns node
.
このノードに見えない変形を加える
使い方
var root = node.addTransform("root")
Overview
Base Class used for all default Node properties
Sceneのスーパークラスでもある
広告

BlippAR でARに再チャレンジ 01

標準

最初のBlipp

1.インストールと設定

1)BlipparアプリをiOSデバイスとPCのiTunesにインストールする

2)デバイスでBlipparアプリを起動し、メニュー>設定>開発

3)公式サイトhttps://developer.blippar.com/ へのログインと同じIDでログインする

4)デバッグメニューとログが可能である(Enable Debug Menu and Log)というメッセージが左上に出ている画面に変わる

5)ホームに戻り、Blippingをスタートする Blipparは終了してよい。

6)iOSデバイスとPCをUSBケーブルで接続する

7)iTunesを開き、デバイスアイコンをクリックして開き、アプリ一覧からファイル共有の欄でBlipparを選択する(図は、公式サイトチュートリアルより拝借)

testing_ios

8)Blipparで必要なファイルをここにドラッグ(最初は空のはず)して使う (つまりside-loadを使ってプログラム転送)

===========転送プログラムの基本============

1.main.js

1)blipparクラスすべてをblippという変数に呼び込む require(‘blippar’).blipp

2)シーンが一つは必要なので、それを追加する addScene()

3)シーンの作成 scene.onCreate() = function(){ ….}

4)上記関数の中は、addSprite だったり、setColorだったり、setTextureだったり、setScaleだったり。。。

2.package.json

~BlippAR API Betaを使うために必要。

{
    "version": "1.0.0",
    "description": "Blippar JS test application",
    "main": "main.js",
    "blipp" : {
        "title": "My first blipp",
        "shortTitle": "1st blipp"
    },
    "dependencies": {
        "blippar": "1.2.45"
    }
}

main.jsも、package.jsonも、UTF-8の文字コードで保存したほうがよい。

3.その他

画像ファイルなども。

===

パブリッシュする場合には、

一つのフォルダに、

assets フォルダ および、javascriptフォルダにまとめ、ZIPで圧縮したファイルをオンラインBlippar作成サイトでアップロードすればよい。