processing.js loadImage（）

私はplatformerのゲームを置くために使っているprocessing.jsのウェブページを作っています。今、私はそれをウェブページ上に置く必要があります。今は背景を赤くすることができますが、コードを挿入するときには、イメージを描画していないことに気付きました。私はそれを見て、画像処理processing.jsの使用は私がやっていたこととは非常に異なっています。それでも動作しません。ここでprocessing.js loadImage（）

HelloWeb.pdeファイル内の私のprocessing.jsコードです：

preload = 
"file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png";

// Eドライブは私のUSBであることに注意してください。それは効果があるかどうかわからない？

//AI Codes 
    int wolfX = 310; 
    int wolfY = 200; 
    int wolfHealth = 50; 

    //Health 
    int kingHealth = 100; 
    int dragon = 500; 

    //LV design 
    int floorHeight = 300; 
    int lvlNum = 1; 

    //movement (x) 
    int maxSpeed = 6.25; 
    int xForce = 0; 
    int kingXPos = 947.5; 

    //movement (y) 
    int kingYPos = floorHeight + 50; 
    int yForce = -15; 
    int jumping = false; 


    void setup() { 
     size(1895, 800); 
     background(255, 0, 0); 
    } 

    void draw() { 
     if (lvlNum != 0) { 
     PImage kingIdle = loadImage("file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png") 
     } 
    };

そしてHTML：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Hello Web - Processing.js Test</title> 
     <script src="processing.min.js"></script> 
    </head> 
    <body> 
     <h1>Processing.js Test</h1> 
     <p>This is my first Processing.js web-based sketch:</p> 
    <canvas data-processing-sources="HelloWeb.pde" width="1895" height="800" style="border:4px solid"></canvas> 
</body> 
</html>

出典

2016-08-02 Marco

あなたはMCVEを掲示するのが習慣に取得する必要があります。できるだけ少ない行まで問題を絞り込んでください。

/* @pjs preload="C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG"; */ 
PImage myImage; 

void setup(){ 
    size(200,200); 
    myImage = loadImage("C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG"); 
} 

void draw(){ 
    image(myImage, 50,50, 100,100); 
}

あなたはまた、あなたのJavaScriptコンソールをチェックアウトするのが習慣に取得する必要があります。たとえば、このコードでは、あなたの問題を示しています。そこにはあなたが得ているエラーが表示されます。そこを見ると、"(index):1 Not allowed to load local resource"というエラーが表示されます。

そして、そのエラーはそれをすべて言います。そのWebページをローカルで実行している場合でも、Webページからローカルファイルにアクセスすることはできません。

あなたのProcessing.jsウェブページは、ローカルWebサーバによって提供されています。処理がこれを処理しますが、それは素晴らしいですが、そのウェブサーバはあなたがスケッチディレクトリにインポートしたファイルにしか触れることができません。処理エディタのスケッチメニューでこれを実行するか、dataフォルダをスケッチディレクトリに手動で追加して、そこで画像を配置することができます。次に、スケッチに関連した画像を参照するだけです。私のコード例では

2行は変更します

/* @pjs preload="Sky4.JPG"; */ 
myImage = loadImage("Sky4.JPG");

をあなたは、あなたがあなた自身のWebサーバを使用する必要があるとしている、あなたのスケッチのディレクトリにあなたのイメージを入れたくない場合。ローカルで実行することも、イメージをイメージホストにアップロードしてコード内のURLを使用することもできます。

出典

2016-08-02 22:42:30

ありがとうございました！これは正常に動作します。 – Marco

@Marco問題はありません。あなたに役立つ回答を受け入れることができます（アップアップしてください）。あなたの質問履歴を見ると、あなたは答えを受け入れていないようです。 –

答えて

関連する問題