• 締切済み

JavaScriptでゲームを作成しています。

背景を奥スクロールしたいのですが、処理に困っています。 2Dゲームなので、2Dでの奥スクロールとして質問しています。 今、考えているのは、画像をズームしていき、後ろにもう一枚等倍の画像を描画する方法なのですが、 ズームすることで画像が荒くなり、見た目としてよくありません。 何かいい方法はありますでしょうか? 回答の方、お願いいたします。

みんなの回答

  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.1

JavaScriptで実現できるかどうかは分かりませんが、 一般的には ・テクスチャフィルタリングでズームによる画像の荒さをごまかす ・ミップマップ といったテクニックが使われることが多いかと思います。

criminal1006
質問者

補足

自分なりにも探してみて、擬似3Dやら透視変換などが出てきましたが、どちらの方がいいでしょうか? また、ご存知でしたらご教授願います。

関連するQ&A

  • C#/C++を使って3D画像をゲーム画面に表示

    C#/C++に3Dグラフィック画像を使ってゲーム制作をしようと考えてるんですが、3D画像をゲーム画面に表示させるときに、どのようなプログラム処理内容を打って画像の描画を行わせれば良いのか、そこを教えてください。 後付け足しで、3Dグラフィック画像とドット絵の画像をC++ではどのフォルダーに保存しておけばよろしいですか? 3D画像をどうしてもゲーム画面に表示させるようにしたいので方法をお願いします。 わかりやすいプログラム・説明の回答を待ってます。 宜しくお願いします。

  • 大きいサイズの画面の更新とキーカラー付の画像表示

    SXGAとかUXGAぐらいの大きいサイズの画面で、背景の前をキャラクターが動き回るプログラムを作ろうとしています。キャラクターはキーカラーをつけてスプライトのように、 1背景をバックバッファに転送 2キャラクターをキーカラーを抜きつつ転送 3バックバッファを描画 という風に処理しています。 この場合、バックバッファを描画するときが結局大きい画像を転送することになるので処理が遅くなってしまいます。 質問したいことは、このやり方が正しいかということで、ゲームとかで大きいサイズの画面を扱う一般的な方法をご存知でしたらアドバイスをお願いします。 あと追加で、DirectGraphicsを使っているのですが、IDirect3DTexture9とかだと読み込める画像のサイズが正方形で2の累乗になってしまうと思うのですが、320x240とかの変形のサイズの画像をキーカラー付で描画できる方法をご存知でしたら教えていただけるとありがたいです。

  • フォトショップ 多角形選択ツールについてです

    初めて質問させていただきます。よろしくお願いします。 質問はフォトショップの多角形選択ツール使用時についてです。 因みに使用しているバージョンは5.0です。 質問させていただきたい内容としましては、 画像の背景を切取る作業をしているのですが細かな部分も多いためズームツールで300%~400%にズームUPして作業しています。 そうしますと、画像がウインドウに納まらないので縦・横ともにスクロールバーが表示されるます。 この状態で多角形選択ツールを使用し切取りたい画像に沿って範囲指定をしていくのですが、スクロールの境目から見えていない画像の方へマウスで多角形選択ツールのポインターを移動させると、とんでもない速さで画像の端までスクロールしきってしまうのです・・・。 以前使っていたパソコンでは徐々にゆっくりとスクロールしていたのでポイントし易かったので設定を変えれば良いのかと思い環境設定で仮想ディスクやメモリを変えてみたりしたのですが一向に変化がありませんでしたので質問させていただきました。 何か対策方法をご存知のかたがいらっしゃいましたらお知恵を貸していただきたく思います。 よろしくお願いします。

  • Wordに図を挿入して図上に四角形を書くとちらつく

    Wordに表を作り、図(Jpeg)を挿入し、その図上に四角形を描画させます。その後ページをスクロールさせたりすると図がちらついてサイズを変更したりできなくなってしまいます。ズームで画面を2ページ表示などにするとできるのですが、使いづらく困っています。 対処方法はありますでしょうか?

  • ホームページ作成で画像の固定が上手く出来ません

    画像の固定方法がよくわかりません。 ホームページで1024×768サイズの画像を 背景にしようと思います、 しかし、画像のサイズに、テキスト文章が収まりません、 横はよいのですが、縦はがだめです、 ホームページビルダー 6.5で作成しておりますが、 ディスプレイサイズは、1024×768サイズで作成しております 画像の設定メニューで、画像を固定してしまうと、 作成したテキスト文章の背景画像に入りきならない部分が、 背景が真っ白になったり、 拡大固定?されたような感じになり、 テキストはスクロールするのですが 背景に指定した画像が部分的に大きくなってしまい、 全部の背景が表示できなかったりします。 画像を垂直で繰り返すにしてしまいますと、 画像の切れ目があからさまにでてしまい不自然になってしまいます。 画像サイズ&ディスプレイサイズが、1024×768設定で、 テキストだけがスクロールするように、表示したいです。 よろしくお願い致します。

  • Javascriptを使わないロールオーバーのやり方

    CSSのみでロールオーバーの指定をしたいとき、皆さんはどのような方法を使われていますか? ・a:hoverで画像を入れ替える (ボタン画像を背景に指定し、文字をインデントで飛ばしている時) ・a:hoverでボタン部分の背景をnoneにして、さらに後ろにある背景を表示させる ・通常時とhover時用の画像を一枚の画像にまとめて背景に指定し、a:hover時に背景画像を移動させる などなど。 いろいろとやり方はあるかと思いますが、皆さんがどのようにされているか教えていただけるとうれしいです。 よろしくお願いします。

  • ゲームのタイトルがわからなくて困っています

    初質問です、アーケードゲームのタイトルなのですが、私の記憶では、縦スクロールで、1ステージの背景が、都市で高速道路があったはずです。少ない情報ですみませんが、教えてください。 

  • スクロールに沿ってjavascriptで背景画像を

    現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。(単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい) cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。

  • 2Dゲーム作成する際、アニメーション処理方法

    DXライブラリとC/C++で2Dゲーム作成しています。 ジャンルはベルトスクロールアクションで 結構キャラやアイテムのアクションを多く含む予定です。 現在RECTによる画像ファイルから 矩形範囲で画像切り出しをし複数の画像をアニメーションしています アニメーションをする際、 現在の経過秒数から、 int アニメパターン番号 = (int)(経過秒数/(1000/fps)) % allframe; のように表示すべきコマ数を求めています。 ネットで検索すると上記のような方法はみかけるのですが。 RPG等コマごとに一定の間隔でアニメするものに関しては これでも良いのですが 今回はいわゆる格闘ゲームの様に1コマ1コマ毎に 表示するフレーム数をしていしたいと考えています。 1コマ目=2フレーム 2コマ目=14フレーム 3コマ目=6フレーム ・・・etc この手の方法を、実現する為に自分でも色々案はあるのですが やはり他の人はどのように処理しているのか より良い実装をする際、こうしたらよいというようなものを 開設しているサイトなどあれば教えてください。 そもそもこういった処理の事を何というのでしょう? 検索のキーワードになるものでもアドバイスいただければ幸いです。 キーフレームアニメーション?なのでしょうか。 どうもそのキーワードでは、あまり目的のサイトが少なく; 昨今3Dの情報が増えてきた為、皮肉ですが 検索しても見つけにくく。 よろしくお願いいたします。

  • javascriptで困っています。教えてください

    canvasタグの画像の描画で困っています。 Imageオブジェクトを生成して、画像ファイルを先読みしておいて var aaa = new Image(); aaa.src = "img/item00.png"; var bbb = new Image(); bbb.src = "img/item01.png"; 配列に入れる var i = [aaa,bbb] 描画コンテキストの取得s取得して、画像を表示させる var canvas = document.getElementById('sample'); if (canvas.getContext) { var context = canvas.getContext('2d'); 座標(10, 10)(50, 50)の位置にイメージを表示 context.drawImage(aaa, 10, 10); context.drawImage(bbb, 50, 50); } としています。このあとクリックなどのきっかけで、画像の絵を入れ替えたいと思い、 var cha1 = i[0].src; var cha2 = i[1].src; i[0].src = cha2; i[1].src = cha1; もう一度描画させているのですが、うまくいきません。 cha1,cha2が取得できているかチェックすると、undifineとでます。 これでは、入れ替えることがでないのでしょうか? 入れ替えるとしたらどのような方法があるのでしょうか。 よろしくお願いします。

専門家に質問してみよう