このセクションの記事

チュートリアル - 3D Textを生成するコンテンツを作ってみる 6/6

Avatar
城戸 雄大
  • 更新
フォローする

UIの入力カーソルを作成する

入力が出来る状態かわからない状態になっています。
画像のような入力時にカーソルを追加し、実際のカーソルの様に点滅を再現してみます。

 

img30.png

 

HIERARCHYからInput Textの配下の末端にImage Elementを追加します。


Positionを x : 9 に変更し、Elementの設定も以下のように変更していきます。
・Enabled : false
・Preset : Right Anchor & Pivot
・Width : 3
・Height : 40
・Color : 黒に変更

img31.png

 

PresetをRightに設定することで、親EntityのTextの右に常に付いてくるように設定しています。
次は点滅させるためのスクリプトを追加します。

 

ASSETSのScriptsフォルダに新しく opacityInterval.js を作成し、以下のコードに書き換えます。

var OpacityInterval = pc.createScript('opacityInterval');

OpacityInterval.attributes.add("time",{type:"number", default:1000});

OpacityInterval.prototype.initialize = function() {
  var self = this;
  window.setInterval(function(){self.opacityToggle(self)}, self.time);
};

OpacityInterval.prototype.opacityToggle = function(self) {
  self.entity.element.mask = !self.entity.element.mask;
};

setIntervalを使って一定間隔毎にElementのMaskのBooleansを切り替えて点滅を実現します。

 

opacityInterval.js を先ほどの作成したEntityの Image に追加しましょう。 Attributesのtimeは、 500 に変更しておきます。

 

img32.png

 

これではクリックしてもカーソルが表示されないので、クリック時に表示されるように inputValue.js を以下のコードに書き換えます。

var InputValue = pc.createScript('inputValue');

// 3Dのテキストを作るEntityを設定
InputValue.attributes.add("meshText", {type:"entity"});
// Elementでテキストを表示しているEntity
InputValue.attributes.add("inputEntity", {type:"entity"});

// focusした時に表示するEntity
InputValue.attributes.add("focusEntity", {type:"entity"});

InputValue.prototype.initialize = function() {
  var self = this;

  // テキストを入力するためのinput要素を追加
  self.inputElement = document.createElement("input");
  self.inputElement.type = 'text';
  self.inputElement.style.position = "fixed";
  self.inputElement.style.bottom = 0;
  self.inputElement.style.right = 0;
  self.inputElement.style.zIndex = 1;
  self.inputElement.style.width = "50px";
  self.inputElement.style.height = "50px";
  self.inputElement.style.fontSize = "2rem";
  self.inputElement.style.opacity = 0;
  self.inputElement.style.cursor = "pointer";

  document.body.appendChild(self.inputElement);

  // クリックされたらinput要素にfocusする
  self.entity.element.on(pc.EVENT_MOUSEDOWN, self.inputFocus, this);

  // inputにfocusしてキー入力を処理
  self.inputElement.addEventListener("keydown",function(){
    self.inputVal();
   });
  self.inputElement.addEventListener("keyup",function(){
    self.inputVal();
  });


  self.inputElement.addEventListener("focus",function(){
    self.focusEntity.enabled = true;
  });

  self.inputElement.addEventListener("blur",function(){
    self.focusEntity.enabled = false;
  });
};

InputValue.prototype.inputFocus = function() {
  // input要素にfocusさせる

  var self = this;
  window.setTimeout(function() {
    self.inputElement.focus();
  }.bind(self), 90);

};

InputValue.prototype.inputVal = function() {
  // input要素に入力されたテキストを textMesh.js の createText() で3D化

  if(this.inputEntity){
    this.inputEntity.element.text = this.inputElement.value;
  }

  this.meshText.script.textMesh.__attributes.text = this.inputElement.value;
  this.meshText.script.textMesh.createText();

};

クリックするとinput要素にfocusイベントが発生します。これを利用して、focus, blurイベントを使用してenabledを切り替えます。
attributesに切り替えるEntityを設定できるようにしています。

 

これでfocusした時だけカーソルが表示され、点滅も確認が出来ます。

 

 

スマホ対応させるためにDOMでデザインを一新する

カーソルの点滅が出来たらスマホ対応も行いましょう。 主にclickイベントの箇所にtouchイベントを追加していく手順ですが、スマホ用のUIに変更もしていきます。

 

inputValue.js を以下のコードに書き換えます。

var InputValue = pc.createScript('inputValue');

// 3Dのテキストを作るEntityを設定
InputValue.attributes.add("meshText", {type:"entity"});
// Elementでテキストを表示しているEntity
InputValue.attributes.add("inputEntity", {type:"entity"});
// focusした時に表示するEntity
InputValue.attributes.add("focusEntity", {type:"entity"});

InputValue.prototype.initialize = function() {
  var self = this;

  // テキストを入力するためのinput要素を追加
  self.inputElement = document.createElement("input");
  self.inputElement.type = 'text';
  self.inputElement.style.position = "fixed";
  self.inputElement.style.bottom = 0;
  self.inputElement.style.right = 0; 
  self.inputElement.style.zIndex = 1;
  self.inputElement.style.width = "50px";
  self.inputElement.style.height = "50px";
  self.inputElement.style.fontSize = "2rem";
  self.inputElement.style.opacity = 0;
  self.inputElement.style.cursor = "pointer";

  document.body.appendChild(self.inputElement);

  if(!self.app.touch){
    // クリックされたらinput要素にfocusする
    self.entity.element.on(pc.EVENT_MOUSEDOWN, self.inputFocus, this);
  } else {

    // SP専用のDOMによるUI作成
    self.entity.element.opacity = 0;
    if(this.inputEntity){
      self.inputEntity.element.opacity = 0;
    }

    self.divSpElement = document.createElement("div");
    self.divSpElement.style.position = "fixed";
    self.divSpElement.style.bottom = 0;
    self.divSpElement.style.right = 0; 
    self.divSpElement.style.zIndex = 2;
    self.divSpElement.style.width = "120px";
    self.divSpElement.style.height = "20px";
    self.divSpElement.style.padding = "20px 0";
    self.divSpElement.style.borderTopLeftRadius = "25px";
    self.divSpElement.style.backgroundColor = "#ffffff";
    self.divSpElement.style.textAlign = "center";
    self.divSpElement.style.cursor = "pointer";

    self.spanSpElement = document.createElement("span");
    self.spanSpElement.style.fontSize = "20px";
    self.spanSpElement.style.fontWeight = "bold";
    self.spanSpElement.style.lineHeight = 1;
    self.spanSpElement.innerHTML = "TOUCH";

    self.divSpElement.appendChild(self.spanSpElement);
    document.body.appendChild(self.divSpElement);

    // DOMのタッチイベント作成
    self.divSpElement.addEventListener("touchstart",function(e){
      e.preventDefault();
      self.inputElement.focus();
    });

  }

  // inputにfocusしてキー入力を処理
  self.inputElement.addEventListener("keydown",function(){
    self.inputVal();
  });
  self.inputElement.addEventListener("keyup",function(){
    self.inputVal();
  });

  if(!self.app.touch){
    self.inputElement.addEventListener("focus",function(){
      self.focusEntity.enabled = true;
    });

    self.inputElement.addEventListener("blur",function(){
      self.focusEntity.enabled = false;
    });
  }

};

InputValue.prototype.inputFocus = function() {
  // input要素にfocusさせる

  var self = this;
  window.setTimeout(function() {
    self.inputElement.focus();
  }.bind(self), 90);

};

InputValue.prototype.inputVal = function() {
  // input要素に入力されたテキストを textMesh.js の createText() で3D化

  if(this.inputEntity){
    this.inputEntity.element.text = this.inputElement.value;
  }

  this.meshText.script.textMesh.__attributes.text = this.inputElement.value;
  this.meshText.script.textMesh.createText();

};

 

inputCreate.js も以下のコードに書き換えます。

var InputCreate = pc.createScript('inputCreate');

// 3Dのテキストを作るEntityを設定
InputCreate.attributes.add("meshText", {type: "entity"});

InputCreate.prototype.initialize = function() {
  var self = this;

  // 作成した3Dのテキストを入れる親Entityを作成
  self.rigidGroup = new pc.Entity();
  self.rigidGroup.name = "RigidGroup";
  self.app.root.addChild(self.rigidGroup);

  if(!this.app.touch){
    self.entity.element.on("mousedown", self.buttonClick, this);

  } else {
    self.entity.element.on("touchstart", self.buttonClick, this);

    // SP専用のDOMによるUI作成
    self.entity.element.opacity = 0;
    self.entity.children[0].element.opacity = 0;

    self.entity.element.on(pc.EVENT_TOUCHSTART, self.inputFocus, this);

    self.divSpElement = document.createElement("div");
    self.divSpElement.style.position = "fixed";
    self.divSpElement.style.bottom = 0;
    self.divSpElement.style.left = 0; 
    self.divSpElement.style.zIndex = 2;
    self.divSpElement.style.width = "120px";
    self.divSpElement.style.height = "20px";
    self.divSpElement.style.padding = "20px 0";
    self.divSpElement.style.borderTopRightRadius = "25px";
    self.divSpElement.style.backgroundColor = "#111111";
    self.divSpElement.style.textAlign = "center";
    self.divSpElement.style.cursor = "pointer";

    self.spanSpElement = document.createElement("span");
    self.spanSpElement.style.color = "#ffffff";
    self.spanSpElement.style.fontSize = "20px";
    self.spanSpElement.style.fontWeight = "bold";
    self.spanSpElement.style.lineHeight = 1;
    self.spanSpElement.innerHTML = "CREATE";

    self.divSpElement.appendChild(self.spanSpElement);
    document.body.appendChild(self.divSpElement);

    self.divSpElement.addEventListener("touchstart",function(e){
      e.preventDefault();
      self.buttonClick();
    });
  }

};

InputCreate.prototype.buttonClick = function() {
  // input要素に入力されたテキストを textMesh.js の createText() で3D化
  this.meshText.script.textMesh.createText(this.rigidGroup);
};

スマホ対応のためのデバイス判断は、 if(this.app.touch){} で行っています。

スマホ用のUIを表示するために、作成していたElementはopacityを0にして非表示にして、スマホ用のDOMを作成しています。

 

img33.png

 

img34.png

 

inputにfocusすることでスマホでもソフトウェアキーボードを表示させることでスマホに対応させています。

 

以上で、チュートリアルは完了となります。

 

3Dテキストの生成や、ElementによるUIなどを使いこなして、リッチコンテンツを作りましょう。 おつかれさまでした。

 

 

チュートリアル - 3D Textを生成するコンテンツを作ってみる - 6/6

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。