processing.js loadImage()

Ich habe eine processing.js-Webseite erstellt, mit der ich ein Jump'n'Run-Spiel starten kann, also habe ich den Code bereits geplant. Jetzt muss ich es nur auf eine Webseite stellen. Im Moment kann ich den Hintergrund rot machen, aber als ich den Code eingab, merkte ich, dass er keine Bilder zeichnete. Ich habe nachgeschlagen und die Bildmethode, die processing.js benutzt, unterscheidet sich sehr von der, die ich gemacht habe. Es wird immer noch nicht funktionieren.processing.js loadImage()

Hier ist mein processing.js Code innerhalb der HelloWeb.pde Datei:

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

// beachten Sie, dass die E-Laufwerk mein USB ist. Ich weiß nicht, ob es Wirkung haben wird.

//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") 
     } 
    };

Und der 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>

Quelle

2016-08-02 Marco

Sie in die Gewohnheit, eine MCVE der Entsendung bekommen sollte. Versuchen Sie, Ihr Problem auf so wenige Zeilen wie möglich einzuschränken. Zum Beispiel zeigt dieser Code Ihr Problem:

/* @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); 
}

Sie sollten auch in die Gewohnheit der Check-out Ihre JavaScript-Konsole erhalten. Dort sehen Sie alle Fehler, die Sie bekommen. Wenn Sie dort suchen, sollten Sie einen Fehler sehen, der "(index):1 Not allowed to load local resource" sagt.

Und dieser Fehler sagt alles. Sie dürfen nicht auf lokale Dateien von einer Webseite zugreifen, auch wenn Sie diese Webseite lokal ausführen.

Ihre Processing.js Webseite wird von einem lokalen Webserver bedient. Die Verarbeitung erledigt das für Sie, was nett ist, aber dieser Webserver kann nur Dateien berühren, die Sie in Ihr Skizzenverzeichnis importiert haben. Führen Sie dies über das Skizzenmenü im Verarbeitungseditor aus, oder fügen Sie manuell einen Ordner data zu Ihrem Skizzenverzeichnis hinzu und fügen Sie Ihre Bilder dort ein. Beziehen Sie sich dann auf die Bilder in Bezug auf die Skizze.

Zwei Zeilen in meinem Beispiel-Code ändern würden:

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

Wenn Sie nicht wollen, Ihre Bilder in Ihrer Skizze Verzeichnis setzen, dann wirst du deinen eigenen Webserver zu verwenden. Sie können eines lokal ausführen oder Sie können Ihre Bilder auf einen Image-Host hochladen und die URL in Ihrem Code verwenden.

Quelle

2016-08-02 22:42:30

Vielen Dank! Das funktioniert gut. – Marco

@Marco Kein Problem. Beachten Sie, dass Sie Antworten (und Upvote) annehmen können, die Ihnen helfen. Betrachtet man die Geschichte deiner Frage, sieht es so aus, als ob du keine Antworten akzeptiert hast. –

Antwort

Verwandte Themen