본문 바로가기

전체 글

 (219)
투시의 종류 (4점, 5점 투시) 그림에서 투시는 굉장히 다양한 방법들이 있다.한 점으로 모여드는 1점 투시, 시선이 한 점으로 집중될 때 사용한다. 두 면을 볼 수 있는 2점 투시는 평소 우리가 가장 많이 볼 수 있는 투시법이다. 3개의 면을 볼 수 있는 3점 투시. 보통 대표적인 예시로는 하이앵글의 도시를 든다. 그리고 여기서부터는 잘 쓰지 않지만 4점, 5점 투시도 존재한다.5점 투시는 4점 투시에 1점 투시를 합친 투시법이다. 함께 보면 좋은 글 : 2025.02.25 - [그림/이론] - 눈높이에 따른 투시
그림 기법 - Infinite Zooming 유튜브 같은 영상 플랫폼을 돌아다니다 보면 심심치 않게 그림 그리는 영상들 중에서 끝없이 화면을 줌-인 하여 계속해서 그림이 펼쳐지는 영상을 본적 있는가? 못봤다해도 크게 상관은 없다. 이 기회에 'Infinite Zoom Art'를 검색해보자. 이번글에서 그리는 방법까지 자세히 소개할 예정이다. 이번 글에서 필자는 Clip Studio 프로그램을 사용하겠다. 바로 본론으로 넘어가겠다. 1. 그림을 여러장 준비한다. 일단 간단하게 그림을 그려보겠다. 구성은 야외에 있는 집, 밝은 방, 어두운 공간 이렇게 3개를 구성한다. 그림 크기는 자신이 원하는대로 한다. 필자는 500px x 500px로 간단하게 그렸다. 그림을 그리기 전 주의사항이 있다. 절대 배경색을 위해 용지 색상은 건들지 않는다. 왜냐하면 용..
GLSL - 그라데이션 #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; //전처리 vec3 colorA = vec3(0.1, 0.2, 0.3); vec3 colorB = vec3(1.000,0.5,0.3); //색상 설정 void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; //화면 길이 및 비율 값을 담고 있는 변수인 st를 생성 vec3 color = vec3(0.0); //기본 색상 설정 vec3 pct = vec3(st.x); //pct 변수 생성 //x축을 기준으로 색상을 변경시킬 예정이므로 st값의 x값만 추출하..
시작 - GLSL [1] 각 GLSL 에디터마다 제공되는 코드는 다르지만 그 목적은 거의 비슷하다. 따라서 오늘은 기본 제공되는 코드들을 분석해보겠다. #ifdef GL_ES precision mediump float; #endif uniform float u_resolution; uniform float u_mouse; uniform float u_time; void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } The Book of Shader Editor에서 새 프로젝트를 시작하면 GLSL 파일을 생성하면 아래와 비슷한 기본 코드가 제공된다. #ifdef GL_ES 이 줄은 GLSL 코드가 WebGL에서 실행될 때 해당하는 코드 블록을 컴파일하도록 하는 전처리기 지시문입니다. ..
캐릭터 설정 캐릭터를 정하기 위해 정해야하는 기본 설정이 있다. "캐릭터를 만드는데 뭔 설정? 그냥 만들면 되는거 아닌가?" 아니다. 캐릭터의 보이는 면부터 시작해서 어떤 가정 환경에서 자라 어떤 성격을 가지게 되었고, 그래서 어떤 상황에서 소심해지며, 어떤 상황에서는 의기소침해지는지, 밥은 잘 먹는지 등을 고려하여 전체적인 캐릭터를 디자인 할 수 있다. 물론 한 컷만 그린다면 여러 상황은 고려하지 않아도 될수도 있다. 하지만 만약 게임에서와 같이 플레이어와 상호작용을 하거나 어떤 상황이 닥쳤을 때 해당 캐릭터의 외형이 어떻게 변화할지 정확히 바로 생각이 나려면 이런 설정을 미리 구체적으로 잡아 놓는 것이 매우 도움될 것이다. 물론 이것은 사람 뿐만 아니라 가상의 생물인 수인, 엘프 등과 같이 웹툰이나 게임에서 볼법..
Parallax Background parallax는 시차라는 뜻으로 천문학에서 사용하는 용어이다. 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직인다. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있다. 위 이미지는 Hallow Knight라는 게임의 한 장면이다. 위에서 설명했듯이 플레이어가 우측으로 이동하면 배경은 좌측으로 이동할 것이다. 그렇다면 투시에서 확인할 수 있듯, 1번이 2번보다 더 가까이 위치해 있다. 때문에 1번을 2번보다 더 빠르게 이동시켜 보다 인상적으로 배경 디자인을 연출할 수 있다. 이를 구현하기 위해서는 프로그래머가 코드로 짜야하는 부분도 있지만 그래픽에서도 해야하는 일이 있다.바로 배경을 구분하는 것이다. 쉽게 말하자면 1번 기둥과 같은 깊이에 있는 기둥을 모아..
QA란? Quality Assurance의 약자로, 소프트웨어를 출시하기 전 테스트하여 정상적으로 작동하는지 확인하는 역할을 주로 맏고 있다. 이 블로그에서는 게임 QA와 관련된 내용을 QA로 지칭할 예정인데 QA는 게임말고도 서비스가 필요한 웹사이트 등과 같은 소프트웨어에서도 꼭 필요하다. 게임 QA의 종류는 크게 두가지로 볼 수 있다. 기획서에 기술된대로 구현됐는지 확인하는 Technical QA와 게임에 반영된 컨텐츠를 테스트하여 재미가 있는지, UI의 시인성은 있는지 등을 확인하는 Fun QA가 있다.
lowp mediump highp #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; 새 프로젝트를 시작하면 위 코드가 보일것이다. (Shader Toy의 경우엔 표시되지 않는다.) 이번 글에서 알아볼 것은 위에서 2번째 줄에 위치한 'precision mediump float;'이다. lowp, mediump, highp는 정밀도 설정이다. 아마 low, medium, high 뒤에 있는 p는 precision을 의미하는 것 같다. 이 경우 정밀도는 값을 저장하는데 얼마나 많은 비트를 사용할지를 말한다. low에서 high로 올라갈 수록 많은 비트를 사용해 더 정확한 쉐이더를 뽑을 ..

티스토리툴바