問題タブ [easeljs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - CreateJS / EaselJS 特定のサイズの形状で奇妙なパフォーマンス
私は現在ゲームを開発しています。それは、ドラッグできる大きなタイル マップを使用し、キャラクターと一緒にすばやく移動します。
問題 JSFiddle の例の単純なバージョンを作成しました
各タイルはShapeであり、キャッシュされます。すべての形状はコンテナ内に入り、コンテナはカメラの位置に基づいて移動します。
特定のズーム レベルで fps が異常に低下することに気付きました。ズームは、形状のサイズを調整するだけです。
ズームを調整すると、私が何を意味するかがわかります。
クロム
ズーム 1 = 良い fps
ズーム 3 = 悪い fps
ズーム 5 = 良い fps
このフレーム レートの問題の原因は何ですか?
これをcreatejsコミュニティフォーラムにも投稿したことに注意してください。
コミュニティの質問
これがjsfiddleの例のコードです
HTML
JS
html - ループeaseljsでキャンバスにアクセス
HTML5プログラミングにeaseljsを使用しています。私の例では、3つのキャンバスがあります(can1、can2、can3はこれらの3つのキャンバスのステージであり、ループを使用してそのキャンバスに画像をロードする必要があります
例えば:
"can"+jが機能していません。j.addChildが関数エラーではないことを示しています。これにアクセスする方法は?
ありがとう、
sathya
html5-canvas - easelJSIE9ビットマップが読み込まれません
イーゼルJSを使用してIE9でビットマップをレンダリングするのに問題があります。他のすべてのブラウザは画像を正常にレンダリングしますが、IE9キャンバスは空白です。非表示のdivに画像をプリロードしようとしましたが、それでも機能しません。これが私のコードです、助けてください!
canvas - easeljsでビットマップの幅と高さを変更するには?
HTML5ページを作成するためにイーゼルjsを使用しています。キャンバスに画像をロードする必要があります。読み込んでいるビットマップの幅と高さを変更する方法。
キャンバスに画像を表示するだけで、
ただし、画像(280 * 150)をトリミングします。
ありがとう、サティア
html5-canvas - EaselJS: Shape オブジェクトの寸法を変更する
完全な初心者の質問。私はGoogleを悪用してきましたが、何らかの理由で、驚くべきことにこれに関する何も見つけることができませんでした...? ここで何かが足りない気がします。:P
現在、キャンバスのサイズをウィンドウのサイズに変更する resize() 関数があります。最小限の例 (jQuery も使用) では、Shape オブジェクトを参照する変数があります。ドキュメントによると、Shape オブジェクトには幅と高さのプロパティが含まれていません。Shape オブジェクトのサイズを変更する最も効率的な方法は何ですか? 動的に削除/再描画しますか?
これは私が持っているものです:
animation - EaselJS Graphics and Shapes の z-index を設定するにはどうすればよいですか
キャンバスに EaselJS Shapes があり、ティックごとに Graphics の描画を開始します。現在、図形の上にグラフィックが描画されています。シェイプが各フレームのグラフィックス上に描画されるように z-index を定義する方法はありますか?
どんな助けでも大歓迎です。
animation - キャンバス全体を更新せずに create.js でアニメーション化する
誰かが私を助けてくれることを願っています。ZigFu と Kinect を html5 で使用していますが、すべて正常に動作していますが、キャンバスに gif 画像を配置したかったのですが、動作しないことがわかりました。これを回避するために、gif のスプライト シートを作成し、キャンバスに配置しました。
私の問題は、easeljs を使用して bmp アニメーションを更新すると、キャンバス全体が更新され、保持したかった元の背景がクリアされることです。
これを実現する別の方法を誰かが提供できますか? 画面全体を更新せずに画像をアニメーション化できますか?
あなたの答えに感謝します.
box2d - ウィンドウのサイズ変更でワールド境界を変更する
私は Box2D を初めて使用し、Box2DWeb と共に EaselJS を使用する最初のプロジェクトに取り組んでいます。世界の壁と床を構成する標準の静的形状を、サイズ変更時にブラウザー ウィンドウと共に移動/更新することを望んでいます。私はそれを達成するために SetPosition を使用しています。これは、Easel の tick メソッドを実行するたびに呼び出されます。ほとんど機能しています。ブラウザーを大きくすると、すべてが期待どおりに機能します。床が下がり、それに応じて動的オブジェクトが下がります。
ただし、ブラウザーが小さくされると、シーン内のボディは、静的な床のボディを突き抜けて消えてしまうことがよくあります。問題のダイナミック ボディが一時的にウィンドウ ビューの外に出てしまうほどサイズ変更が重要な場合にのみ発生するようです (たとえば、高さを下げるとブラウザ ペインの下に完全に移動します)。ただし、ブラウザのサイズをかなりゆっくりと変更すると...奇妙なことに、機能します。
私の問題に対する良い解決策は思い浮かびません。また、ウェブ上で動作の例を見つけることができませんでした。それはできますか?ご協力いただきありがとうございます。
リー:
まったく - 返信ありがとうございます。これは backbone.js プロジェクトです。例はここで見ることができます:
基本的なウィンドウ サイズ変更リスナーは、ファイルの下部にあります。
/b2dweb/js/routers/Main.js
... app.box2d を参照します。これがバックボーン ビューです。
/b2dweb/js/views/Box2DView.js
「onStageResize」メソッドは、ワールド境界を配置しています。このクラスの一番下にある update メソッドは、/b2dweb/js/routers/Main.js の tick メソッドを介して 45/sec と呼ばれます。
作業全体の zip がここに圧縮されています。
http://kensonger.com/b2dweb/box2d_experiment.zip
ブラウザ ペインのサイズをすばやく上向きに変更し、次に下向きにすばやく変更すると、box2d/easel オブジェクトが床を通過するのがわかります。下方向にサイズ変更しないと、オブジェクトは通り抜けて消えてしまいます。ただし、そうすると、床がもう一度通過し、落下物をキャッチします。
繰り返しますが、洞察に感謝します-大歓迎です。
javascript - easeljs-コンテナmouseEnabledが機能しない
を呼び出すときにコンテナの取得に問題がありgetObjectsUnderPoint
ます。のドキュメントによると、easeljs
プロパティmouseEnabled
がtrue
コンテナに設定されている場合、呼び出すgetObjectsUnderPoint
と、子ではなくコンテナオブジェクトが返されます。
サンプルコードでは、2つのコンテナーがあり、各コンテナーには2つの子(形状と画像)があります。そのドラッグアンドドロップサンプル。mouseupイベントで、両方のコンテナーがオーバーラップしているかどうかを確認しています。しかし、私が呼び出しているときstage.getObjectsUnderPoint
、その戻り配列[Shape, Image, Shape, Image]
。私が期待していたのは両方のコンテナです。
ステージや他の何かの他のプロパティを設定するために私は行方不明かもしれません。
ウェブ上で見つけようとしましたが、運がありませんでした。
どんな助けでもいただければ幸いです。ありがとう
canvas - EaselJSアニメーションで長方形の幅を減らす方法
アニメーションの目盛りごとに長方形の幅を狭くしたい。
init()メソッドでは、最初に次のように長方形を作成します。
tick()で長方形の幅にアクセスするにはどうすればよいですか?