My Boundary As Much As I Experienced

보호되어 있는 글입니다.

[이전 포스팅]이전 포스팅에서 살짝 언급했지만 GameObject와 Physics의 차이에 대해서 더 자세히 알아보려 한다.GameObject와 Physics는 가장 중요한 개념 세 개 중의 두 가지이기 때문에 중요하다.GameObject, Physics 그리고 Event 이렇게 3개를 주물러서게임을 만드는게 Phaser의 게임제작 방식의 전부. 😁 그런데 현재 듣고있던 Phaser 튜토리얼에서어떤 것은 scene의 add 메소드를 활용하고,어떤 것은 this.physics.add를 사용하는데,"물리엔진이 필요한 것은 physics를 사용해야돼요~"라고 어물쩡 말하고 넘어가서나 혼자 더 공부해본 내용을 정리하려 한다. https://bumang.tistory.com/316 [Phaser3.js 배우기]..

들어가며어떤 프레임워크, 환경이든 라이프사이클(쉬운말로 동작 흐름?)을 제대로 이해하는게 핵심적인 공부방법이다.다른 예시로, 리액트 컴포넌트의 라이프사이클을 이해하고 나서야리렌더링 방식과 memo/callback 등의 최적화 방식을 알 수 있듯이,Phaser로 게임개발을 경험하려면 Phaser의 동작 흐름을 파악해보려 한다.  태초의 게임 생성어떤 Phaser 프로젝트든 Config를 new Phaser.Game(...)에 패러미터로 제공하여 새로운 인스턴스를 생성한다.Phaser객체는 게임 생성을 위한 모든 하위 클래스들을 가지고 있다. (Action, Scenes, Camera, Animation, GameObject, ...)import LoadingScene from "./scenes/Loadi..

크리에이티브 코딩 랩 137.5의 전시를 위해 p5.js로 진자운동으로 씬이 바뀌는 애니메이션을 구현했다.https://truth-in-pendulum.vercel.app/ 이 작품으로 모두의 연구소 강남점에서 2024. 07. 19. - 2024. 07. 27. 까지 전시한다.다른 분들의 재밌는 작품들도 많으니 구경해볼 사람들은 잠깐 들러봐도 좋겠다.(그나저나 포스터 깔쌈하게 잘 만들지 않았나? 내가 만들었다 히히)  0.  작품 컨셉내 작품은 펜들럼이 정지하면 그 안의 인물의 내밀하고 시꺼먼 속이 보이는(?) 컨셉의 애니메이션이다.원래 '펜들럼 안의 희노애락'을 컨셉으로 하려 했는데 '희노애락'은 이제 너무 전형적인 컨셉인거 같아서 변경했다.가면 갈수록 추악한 분위기로 바뀌는 더 딥해지는 컨셉으로....

게임을 구현한다는건 언제나 복잡한 과제인거 같다.모든 task를 절차적으로 하기보단 모듈화하여 적재적소에 활용하는 능력이 매우 중요하다는 것을 느꼈고,이를 p5.js에서 어떻게 사용하는지를 알 수 있는 좋은 튜토리얼이었다. let cols; let rows;let size = 25;let board = [];let food; let head; let dir; // head의 진행방향let length = 1;let gameOver = false;function setup() { createCanvas(400, 400); frameRate(5); // 너무 빠르지 않게 프레임을 낮춰줌 cols = width/size; rows = height/size; for (let i=0; i cols-1 |..

크리에이티브 코딩 모임인 137.5에서 pendulum을 주제로 작업물을 만들어야하는데 "어쩌지.." 하다가기술적으로 어려운 것을 구현하기보다 특이한 컨셉으로 승부하자! 라는 느낌으로 작업물을 만들었다.Truth in Pendulum이라고 해야되나? 마법 진자 거울로 어떤 사람을 비추면 그 사람의 실제 마음 속을 비출 수 있다...라는 요상한 컨셉의 작업을 만드려고 한다. 이제1. 렌즈를 떨어뜨리고 가속도를 붙이는 과정도 보여주기2. 실제 마법렌즈같이 꾸미기3. 렌즈가 감속하여 정중앙에 멈췄을 때 렌즈에 클로즈업되면서 렌즈 속 세계로 들어가기?4. 들어간 세계에서 또 다시 마법렌즈를 사용하여 다른 감정을 보기 등을 구현하려 한다.... 설명이 잘 전달될지 모르겠다. 상상을 위해 아래 그렸던 컨셉 아트들도..

블러가 있는 이미지에서 선명해지는 것을 구현한 함수를 만들었다. preload의 사용법, 만든 이미지의 width/height값을 사용하는 법, filter함수를 사용하는 법 등을 배웠다. 이제 선명한 이미지가 어느정도 blur된 채로 유지할 수 있는 함수도 만들어놔야겠다.이런 필터 함수들은 최종적으로 만들고 싶은 결과물에 쓰기 위해서 만들고 있다.// IMAGESlet img;let blurAmount = 20; // 초기 블러 강도 (0에서 20까지)function preload() { img = loadImage("asset/mayoiga.jpg"); // 이미지 파일 경로}function setup() { createCanvas(img.width, img.height); imageMode(C..

재밌어 보이는 튜토리얼들을 따라해보고 올릴 예정이다. 추후 여러 튜토리얼끼리 조합하는 것도 해볼 수 있겠다.// 이번 코드에 쓰일 모듈class Cell { constructor(x0, y0, r, angle){ this.r = r; this.angle = angle; // 시작 x, y 좌표 this.x0 = x0; this.y0 = y0; } update(){ this.x = this.r*cos(this.angle); this.y = this.r*sin(this.angle); this.angle += 0.05; // 어김없이 angle을 바꿀 때마다 cos, sin값이 바뀌며 회전한다. } display(){ // 아래 주석 해제하면 ..

각도와 사인 함수의 반환값라디안 단위의 각도: 사인 함수는 입력된 각도를 라디안 단위로 받아들인다. 1 라디안은 약 57.3도이다.사인 값: 주어진 각도에 따라 사인 값은 다음과 같이 변한다:sin⁡(0)=0sin(0)=0sin⁡(𝜋2)=1sin(2π​)=1sin⁡(𝜋)=0sin(π)=0sin⁡(3𝜋2)=−1sin(23π​)=−1sin⁡(2𝜋)=0sin(2π)=0 let angle;// angleVelocitylet angleV = 0;// angleAccelerationlet angleA = 0.001;let bob;let len;let gravity = 1;function setup() { createCanvas(600, 800); origin = createVector(300, 0); ..

벡터란 무엇일까...? 이번에 공부해봤지만 잘 모르겠다.(이과들만 배우는 과목이었나, 기하와 벡터가? 교육과정도 다 까묵음) 하여튼 이번 Nature of Code에서 벡터를 이해하기 위해 여러가지 영상을 봤는데그나마 가장 이해 잘 되는 영상은 아래였다. (그나마)https://www.youtube.com/watch?v=ArgTeYVuJUo&t=297s  벡터가 뭔가요-? !벡터는 크기와 방향을 갖는거라고 한다. 사실 이렇게만 말하면 너무 추상적이다.물리학이나 순수 수학이나 컴퓨터 과학 모두에서 벡터를 되게 각자의 방식으로 정의하는거 같다.이렇게 방대한 개념을 다 이해하기는 힘들거 같고, 컴퓨터 과학에서 벡터를 어떻게 쓰는지만 알아보았다.대강 Origin 좌표(대게 0,0)에서 임의의 점(예를 들어 3,..