processing.js loadImage()

나는 platformer 게임을하기 위해 사용하고있는 processing.js 웹 페이지를 만들었으므로 이미 계획된 코드를 가지고있다. 이제 웹 페이지에 붙여 넣기 만하면됩니다. 지금은 배경을 빨간색으로 만들 수 있지만 코드를 넣으려고 할 때 어떤 이미지를 그리지 않는 것을 알았습니다. 나는 그것을 찾았고, processing.js의 이미지 방식은 내가 한 일과 매우 다르다. 여전히 작동하지 않습니다. // E 드라이브 내 USB 떨어져 있음을 알아processing.js loadImage()

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

다음은 HelloWeb.pde 파일 안에 내 processing.js 코드입니다. 효과가 있는지 나는 모른다.

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

또한 자바 스크립트 콘솔을 확인하는 습관을한다 : 예를 들어 다음과 같은 코드는 문제를 보여줍니다. 거기에 오류가 표시됩니다. 거기를 보면 "(index):1 Not allowed to load local resource"이라는 오류가 나타납니다.

그리고 그 오류는 모두 그것을 말합니다. 해당 웹 페이지를 로컬로 실행 중이더라도 웹 페이지에서 로컬 파일에 액세스 할 수 없습니다.

Processing.js 웹 페이지가 로컬 웹 서버에서 서비스되고 있습니다. 처리가이 작업을 처리하는데 좋지만 웹 서버는 스케치 디렉토리로 가져온 파일 만 터치 할 수 있습니다. 처리 편집기의 스케치 메뉴를 통해이 작업을 수행하거나 수동으로 data 폴더를 스케치 디렉토리에 추가 한 다음 이미지를 거기에 넣을 수 있습니다. 그런 다음 스케치를 기준으로 이미지를 참조하십시오. 내 예제 코드에서

두 줄이 변경됩니다 :

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

당신이 당신의 스케치 디렉토리에 이미지를 넣어하지 않으려면

는, 당신은 당신의 자신의 웹 서버를 사용해야 할 것입니다. 로컬에서 실행하거나 이미지 호스트에 이미지를 업로드하고 코드에서 URL을 사용할 수 있습니다.

출처

2016-08-02 22:42:30

감사합니다. 이것은 잘 작동합니다. – Marco

@Marco 문제가 없습니다. 도움이되는 답변을 받아 들일 수 있습니다 (그리고 upvote). 질문 기록을 보면 답을 수락하지 않은 것 같습니다. –

processing.js loadImage()

답변

관련 문제