본문 바로가기
728x90
SMALL

p5.js4

[ChatGPT][P5.js / Tiled] P5.js에 Tiled (.tmx) 파일을 적용하는 방법 예제 샘플 p5.js 스케치에 Tiled TMX(Tile Map XML) 파일을 포함하려면 "p5.js-tmx" 또는 "tmx-parser"와 같은 라이브러리를 사용하여 TMX 파일을 로드하고 구문 분석해야 합니다. 여기서는 "tmx-parser" 라이브러리를 사용하여 p5.js 스케치에 Tiled TMX 맵을 로드하고 표시하는 방법을 보여 드리겠습니다. 1단계: tmx-parser 라이브러리 설치 npm을 사용하여 "tmx-parser" 라이브러리를 설치하거나 스크립트 태그를 통해 직접 포함할 수 있습니다. 스크립트 태그를 통해 포함하는 방법은 다음과 같습니다. 2단계: TMX 파일 만들기 Tiled Map Editor를 사용하여 Tiled TMX 지도를 만들고 .tmx 파일로 저장합니다. TMX 파일에 타일셋과.. 2023. 9. 7.
[ChatGPT][P5.js][2D RPG게임] p5.js 라이브러리를 사용하는 간단한 2D RPG 스프라이트 시트 애니메이션의 예제 샘플 p5.js 라이브러리를 사용하는 간단한 2D RPG 스프라이트 시트 애니메이션의 예제 샘플 let spriteSheet; let spriteSize = 32; let spriteX = 0; let spriteY = 0; let frame = 0; let animationSpeed = 12; function preload() { spriteSheet = loadImage("sprites.png"); } function setup() { createCanvas(512, 512); } function draw() { frame++; if (frame % animationSpeed === 0) { spriteX++; if (spriteX > 3) { spriteX = 0; spriteY++; if (sprite.. 2023. 1. 23.
[ChatGPT][P5.js][2D RPG게임] P5.js 프로그래밍 언어를 사용하는 간단한 2D RPG 타일맵의 예제 샘플 P5.js 프로그래밍 언어를 사용하는 간단한 2D RPG 타일맵의 예제 샘플 let tileSheet; let tileSize = 32; let map = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,.. 2023. 1. 23.
[WebGL][P5.js][웹 기반] WebGL 웹 기반 JavaScript 확장 라이브러리 P5.js P5.js 웹 기반 JavaScript 확장 라이브러리로 Processing 프로세싱과 마찬가지로 미디어 아트, 그래픽 아트, 2D 게임 / WebGL 웹 기반 3D게임 등을 구현할 수 있습니다. 코드 구조는 함수 표현만 다를 뿐 Processing 프로세싱 코드 구조와 같습니다. 제가 사이드 프로젝트로 P5.js / WebGL을 이용해서 3D 게임 데모를 구현한 게시글이 있습니다. 소스코드도 깃허브 배포했으니 참고하시기 바랍니다. P5.js는 예Qianqian Ye 가 리드하고, 로렌 맥카시 Lauren Lee McCarthy 가 창안하였고, Processing Foundation 프로세싱 재단에서 지원하고 있습니다. P5.js 기본 코드 골격 function setup() { } function dr.. 2023. 1. 22.
728x90
LIST

티스토리툴바