P5.js은 (는) 무엇이죠?
본문
p5 소개
이 튜토리얼 시리즈에서는 p5 라이브러리와 함께 JavaScript를 사용합니다.
p5.js는 2D 게임 개발을 쉽고 편리하게 만드는 데 사용할 수 있는 톤의 그리기 기능이 있는 JavaScript 라이브러리입니다.
우리는 p5.js 편집기를 사용하여 최소한의 설정만으로 이러한 게임을 구현할 것입니다. 이는 우리가 원하는 것을 만들 시간이 더 있다는 것을 의미합니다.
https://codeheir.com/2019/02/01/what-is-p5-js-0/
Sketch.js
에디터를 열 때 가장 먼저 보게 될 것은 sketch.js라는 파일입니다. 이것이 모든 마술이 일어나는 곳입니다! 파일에는 setup() 및 draw() 함수가 있으며 개념은 매우 간단합니다. 설정이 한 번 실행되고 프로그램이 종료 될 때까지 연속적으로 그리기가 실행됩니다. 기본적으로 프레임 속도 (draw() 함수가 호출 된 횟수)는 60입니다.
// this executes oncefunction setup() { createCanvas(400, 400);}// this executes 60 times per secondfunction draw() { background(220);}createCanvas (400, 400) 및 background (220)는 무엇입니까?
너비와 높이가 400px 인 캔버스 요소를 만듭니다. 기본적으로 canvas 요소는 HTML5의 일부이므로 우리가 똥 뜨거운 게임을 만들 수 있습니다. 캔버스는 우리가 그리는 것입니다!
캔버스의 배경 함수 색상, background (220)와 같은 인수로 하나의 값만 지정하면 회색조이지만 RGB 인수를 사용하여 원하는 색상을 선택할 수 있습니다. background (255, 204, 0)은 예를 들어 펑키 옐로우. 각 값의 범위는 0-255입니다. 자세한 내용은 여기를 참조하십시오.
이 Index.html은 무엇입니까?
자, p5.js 웹 편집기를 열고 디렉토리 구조에서 발견하면 이 이상한 보이는 index.html 파일이 있습니다. index.html 페이지는 웹 사이트에 표시되는 기본 페이지에 가장 많이 사용되는 이름이므로 들어 보셨을 것입니다!
우리가 사용하는 것은 p5.js 라이브러리를 가져 와서 JavaScript 파일을 지정하는 것입니다! <head> 태그 내에 웹 사이트에 이상한 모양의 링크가 있는지 확인하십시오. 계속해서 검색 창에 복사하여 붙여 넣으십시오. 우리에게 필요한 라이브러리!
<!DOCTYPE html><html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body></html>첫 번째 그림을 만들어 봅시다!
배우는 가장 좋은 방법은 그렇게 하는 것이라고 생각합니다. 우리가 할 일은 벽에서 튀어 나오는 공을 코딩하는 것입니다. 나중에 퐁을 코딩 할 때 유용 할 수 있습니다.
공을 그리기
let x;let y;function setup() { createCanvas(400, 400); x = width / 2; y = height / 2;}function draw() { background(220); fill(100, 123, 255); ellipse(x, y, 50, 50);}코드 스니펫에서 x와 y가 정의되어 있음을 알 수 있습니다. 이것은 우리의 작은 탄력 공의 x와 y 위치를 저장하는 변수입니다. let 키워드는 자바 스크립트에서 변수를 선언하는 데 사용됩니다. var도 사용할 수 있지만 var는 게양이라고 하는 이 끔찍한 것을 사용합니다. var가 아닌 let을 사용할 것입니다.
따라서 x와 y는 파일 상단에 정의되어 setup ()에서 변수를 할당하고 draw ()에서 변수에 액세스하려고 할 때 가능합니다! 범위에 있습니다!
createCanvas (width, height)를 사용하여 캔버스를 만들었으면 이제 p5.js 변수 너비 및 높이에 액세스 할 수 있습니다. 예를 들어 너비 = 400이고 높이 = 400입니다.
- fill (r, g, b) – 배경 함수와 매우 유사하지만 모양의 색상을 변경하는 데 사용되므로 fill () 함수에 정의 된 모든 모양이 해당 색상이 됩니다. 우리의 공이 어떻게 파란색인지 주목하십시오!
- ellipse (x, y, width, height) – 지정된 x와 y 위치에 주어진 너비와 높이로 타원을 그립니다. 아주 간단합니다!
아래는 코드를 실행하는 모습입니다! 계속해서 코드를 p5.js 편집기에 복사하여 직접 사용해보십시오. 나는 당신이 숫자로 연주하고 그것을 느끼도록 격려합니다!
공을 움직여!
let x;let y;let radius = 25;let xSpeed;let ySpeed;function setup() { createCanvas(400, 400); x = width / 2; y = height / 2; xSpeed = random(2, 5); ySpeed = random(2, 5);}function draw() { background(220); fill(100, 123, 255); ellipse(x, y, radius * 2, radius * 2); x += xSpeed; y += ySpeed; if (x > width - radius || x < radius) { xSpeed = -xSpeed; } if (y > height - radius || y < radius) { ySpeed = -ySpeed; } }위의 코드에서 두 개의 새로운 변수 xSpeed와 ySpeed가 추가되었음을 알 수 있습니다. xSpeed와 ySpeed는 2와 5 사이의 난수로 초기화됩니다. random (2, 5)는 p5 함수이기도 합니다. 이 xSpeed 및 ySpeed는 각 프레임의 x 및 y 좌표에 추가됩니다 : x + = xSpeed 및 y + = ySpeed.
타원에 반경이라는 새로운 변수가 추가되었으므로 볼이 벽에 닿는 시점을 결정할 때 이 정보를 사용할 수 있습니다!
공이 벽에 닿았는지 확인하기 위해 문장이 추가되면 벽에 닿으면 방향이 바뀌므로 왼쪽 또는 오른쪽 벽에 닿으면 xSpeed가 반전되고 위쪽 또는 아래쪽에 닿으면 ySpeed가 반전됩니다. 벽.
적중 감지 작동 방식을 이해하는 데 도움이 되도록 오른쪽에서 왼쪽으로 진행하고 왼쪽 벽을 때리는 공의 그림을 만들었습니다.
적중 감지 이해
그리고 거기에 우리는 그것을 가지고 있습니다. 절대적으로 피의 환상적인 작은 스케치! p5.js 라이브러리의 매우 간단한 기능 만 사용하여 얼마나 멀리 갈 수 있는지 놀라실 것입니다.
코드를 p5 편집기에 복사하고 재생하는 것이 좋습니다. 여기 몇 가지 아이디어가 있습니다.
- 다른 공을 추가하십시오! 서로 충돌하게 만들 수도 있습니다.
- 스케치가 계속 진행 될수록 공의 속도가 빨라질 수 있습니다.
- 공이 벽에서 튀어 나오는 대신 벽을 통과하여 반대쪽으로 나옵니다.
상상력을 발휘하고 재미있게 보내십시오!
내가 정기적으로 사용하는 일부 p5.js 함수
p5.Js 참조를 살펴 보는 것이 좋지만 사용하지 않을 기능이 많이 있습니다. spaceheir.com에서 지금까지 게임에서 사용한 모든 p5.js 함수는 다음과 같습니다. (깃 허브)
Structure
Events
Colour
Shapes
Constants
Environment
Transform
Image
Typography
Maths
- 이전글p5로 멀티 플레이어 게임을 코딩하는 방법! 19.08.25
- 다음글탁구게임을 코딩하는 방법! 19.08.25