如何通过Resonance Audio的setPosition映射Canvas像素坐标到音频源位置

Hey there! Let's work through how to map your Canvas pixel coordinates to Resonance Audio's meter-based space, plus set up room properties for your 2D game. This will let you leverage Resonance's advanced spatial audio features while keeping your existing Canvas-based positioning logic.

1. Define a Pixel-to-Meter Conversion Ratio #

First, pick a scaling factor that makes sense for your game. Resonance Audio uses meters as its unit, so you'll need to translate pixel distances to real-world-like measurements. For example, you could set:
1 meter = 100 pixels
This keeps movement granular enough for spatial audio to feel responsive without making your game world feel overly large.

2. Fix Coordinate System Differences #

Canvas uses a top-left origin with y-values increasing downward, while Resonance Audio uses a centered origin with y-values increasing upward. We’ll adjust for this in a conversion function:

const canvas = document.getElementById("map");
const ctx = canvas.getContext("2d");
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

// Adjust this based on your game's scale needs
const PIXELS_PER_METER = 100;

// Convert Canvas (x,y) pixels to Resonance Audio (x,y,z) meters
function convertCanvasToResonance(x, y) {
  // Shift origin from Canvas top-left to center
  const centeredX = x - canvasWidth / 2;
  // Flip y-axis to match Resonance's upward direction
  const centeredY = canvasHeight / 2 - y;
  
  // Convert to meters
  const resonanceX = centeredX / PIXELS_PER_METER;
  const resonanceY = centeredY / PIXELS_PER_METER;
  
  // For 2D games, set z to a fixed small value (e.g., 0.5m) to simulate height
  const resonanceZ = 0.5;

  return { x: resonanceX, y: resonanceY, z: resonanceZ };
}

3. Rewrite Your Audio Loader for Resonance Audio #

Replace the old PannerNode logic with Resonance Audio's API. We’ll create a scene, audio sources, and add a method to set positions using Canvas pixels:

// Initialize Resonance Audio scene
const audioContext = new AudioContext();
const resonanceScene = new ResonanceAudio(audioContext);
resonanceScene.output.connect(audioContext.destination);

function audioFileLoader(fileDirectory) {
  const soundObj = {};
  let resonanceSource = null;

  const getSound = new XMLHttpRequest();
  soundObj.fileDirectory = fileDirectory;
  getSound.open("GET", soundObj.fileDirectory, true);
  getSound.responseType = "arraybuffer";
  
  getSound.onload = function() {
    audioContext.decodeAudioData(getSound.response, function(buffer) {
      soundObj.soundToPlay = buffer;
      // Create a Resonance Audio source tied to the scene
      resonanceSource = resonanceScene.createSource();
      resonanceSource.buffer = buffer;
      resonanceSource.loop = false; // Toggle based on your needs
    });
  };
  
  getSound.send();

  // New method: Set audio position using Canvas pixel coordinates
  soundObj.setCanvasPosition = function(x, y) {
    if (!resonanceSource) return; // Wait for source to initialize
    
    const { x: resX, y: resY, z: resZ } = convertCanvasToResonance(x, y);
    resonanceSource.setPosition(resX, resY, resZ);
  };

  // Helper method to play the sound
  soundObj.play = function() {
    if (resonanceSource && soundObj.soundToPlay) {
      resonanceSource.start();
    }
  };

  return soundObj;
}

4. Define Room Properties for Your 2D Game #

To create distinct audio rooms, translate your Canvas-based room dimensions (in pixels) to meters, then use Resonance's setRoomProperties method:

// Example: A room in Canvas from (50,50) to (450,350) → 400px wide, 300px tall
const roomPixelWidth = 400;
const roomPixelHeight = 300;
// For 2D games, assume a depth (e.g., 200px) to simulate room volume
const roomPixelDepth = 200;

// Convert to meters
const roomWidth = roomPixelWidth / PIXELS_PER_METER; // 4m
const roomHeight = roomPixelHeight / PIXELS_PER_METER; // 3m
const roomDepth = roomPixelDepth / PIXELS_PER_METER; // 2m

// Set room acoustics (adjust materials to match your game's environment)
resonanceScene.setRoomProperties({
  width: roomWidth,
  height: roomHeight,
  depth: roomDepth,
  materials: {
    left: 'brick',
    right: 'brick',
    front: 'wood',
    back: 'wood',
    down: 'carpet',
    up: 'concrete'
  }
});

5. Usage Example #

// Load an enemy sound
const enemySound = audioFileLoader('enemy_alert.wav');

// When the enemy is at (200, 150) on Canvas, set its audio position
enemySound.setCanvasPosition(200, 150);

// Play the sound
enemySound.play();

内容的提问来源于stack exchange，提问作者Loz