typescriptでゲームを作っています。
説明がわかりにくいかもしれませんが、ご教授お願いいたします。
親要素の中に子要素をaddChildして、親要素はマウスの方向を向くように回転の設定をしているので、子要素も一緒回転しています。
クリックするとクリックした場所に子要素が飛ぶようにしています。
<現状>
このままだと、子要素が飛んでいる最中にマウスを動かすと、子要素もついてきて
しまっています。
なので、親要素からremoveChildしゲームのコンテナ自体にaddchildしなおしています。
<解決したいこと>
新たにaddChildしたときにその時点の子要素の座標、もしくは子要素の基準点が左上端になるので、親要素の左上端の座標を求めたいです。
(また、クリックしたところまでしか行かない子要素を画面外まで飛ばしたです。)
<試したこと>
・三角関数等を使い、点Aから中心点Cまで距離と、親要素の角度を使い点Bを求めた
・getBoundingClientRect()など使えないか試みた
黄色:親要素
灰色:子要素
緑:親要素が回転しクリックした際の位置
紫:基準点の座標
青:求めたい移動した先の座標
赤:親要素が回転するための中心点
typescript
1//親要素 2this.gun.x = this.centerX; 3this.gun.y = this.centerY; 4this.pageGame.addChild(this.gun); 5 6//子要素 7this.gunBall.x = -18; 8this.gunBall.y = -30; 9this.gun.addChild(this.gunBall); 10 11//マウス座標を取り親要素を回転 12private mouseMove = () => { 13 const gunX = this.container.stage.mouseX - this.gun.x ; 14 const gunY = this.container.stage.mouseY - this.gun.y ; 15 this.gunRadians = Math.atan2(gunY, gunX); 16 this.gunDegrees = this.gunRadians * 180 / Math.PI +90; 17 this.gun.rotation = this.gunDegrees; 18 this.container.stage.update(); 19} 20 21//クリックしたときの処理 22private handleUp = () => { 23 //ボールの現在座標格納 24 this.gunBallY = this.gun.y; 25 this.gunBallX = this.gun.x; 26 this.gun.removeChild(this.gunBall); 27 28 //発射時の座標格納 29 this.gunBall.x = this.gunBallX -18; 30 this.gunBall.y = this.gunBallY -30; 31 this.pageGame.addChild(this.gunBall); 32 createjs.Tween.get(this.gunBall).to({x:this.container.stage.mouseX,y: this.container.stage.mouseY},1000); 33 34 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。