반응형

게임하면서 디코 봇을 이용해서 노래를 많이듣는데 서버가 말을 안들을때가 많더라구요

그래서 직접 한번 추가해볼려고합니다.

노래이외에도 뭔가 기능을 추가해보고싶은데.. 아직 기능은 못정해서 ㅋㅋㅋㅋ

일단 디코 봇을 추가하고 서버에 추가하는 것까지 노드를 이용해서 연결해볼려고 합니다.


1. 디코 봇 생성하기

https://discord.com/developers/applications

 

Discord Developer Portal — API Docs for Bots and Developers

Integrate your service with Discord — whether it's a bot or a game or whatever your wildest imagination can come up with.

discord.com

새로운 봇 추가

디스코드 페이지에서 로그인을 하고 new application을 클릭하여 새로운 봇을 생성해보겠습니다.

사용할 봇의 이름을 입력하고 create 버튼을 눌러줍니다.

 

2. 봇 추가하기

서버에서 좌측 'Bot'을 클릭하고 Add bot을 클릭해서 추가해줍니다.

Yes, do it! 이라고 아주 상큼하네요

 

봇에서 설명과 이미지를 설정할수있습니다.

봇은 로그인을 토큰값을 이용해서 하는거같더라구요 reset token을 이용해서 새로운 토큰을 발급받으면됩니다.

토큰은 한번만 발행되기때문에 유출되지 않게 따로 저장해두셔야합니다!!!!

 

퍼블릭 설정여부로 공개봇을 생성할지 개인봇을 생성할지 결정할 수 있습니다.

 

Bot 기본 설정을 추가해주고 봇의 권한을 설정할수있습니다.

OAuth2 에서도 같은 기능을 수정할 수 있습니다!

헷갈리는 거 빼고 뭔가 필요해보이는것만 추가했습니다..ㅎㅎ

 

이번엔 OAuth2에서 연결할 수 있는 링크를 생성해보겠습니다.

OAuth2 URL Generator 에서 bot을 클릭해줍니다.

위에서 봇 설정을 해줬었는데 따로 연결되는건 없더라구여..

봇쪽에서 따로 설정안해줘도 이곳에서 설정해도 문제없을것 같습니다!

bot 설정까지 끝내면 밑에 클라이언트 ID와 함께 generated url이 생성됩니다.

 

3. 서버에 봇 추가하기

해당 링크로 접속을 해보면 제 서버와 연결되는 곳으로 설정이 가능합니다.

아근데 이거 서버 설정을 동시에 못하더라구여 ㅋㅋㅋㅋㅋㅋㅋ

동시에 2개의 서버로 접근하는 방법을 모르겠습니다......

페이지 1번에 1개의 서버로 접근이 가능해서 저는 2번열어서 처리했습니다!!

 

두번 다 문제없이 서버에 추가되는 것을 확인했습니다!!

다른곳으로 옮겨가는 형태가 아니어서 다행이군요ㅎㅎ


자 이제 바로 노드 서버를 연결해보겠습니다.

 

노드가 이미 설치되어있다고 가정하고 진행하겠습니다.

 

1. 디스코드 모듈 설치

npm install --save discord.js

2. 메인 코드 작성 [ main.js ]

const Discord = require("discord.js");
// const client = new Discord.Client();
const { Client, GatewayIntentBits } = require('discord.js');

const client = new Discord.Client({
  intents: [
    GatewayIntentBits.Guilds, //GUILDS
    GatewayIntentBits.GuildMessages, //GUILDS_MESSAGES
  ]
});

const token = require("./config/token.json"); //토큰 연결
const prefix = "!!"; //명령어 접두어

client.on('ready', () => { 
    console.log(`Hello~ ${client.user.tag}!`); //서버 구동시 Hello~ [내 봇 정보]! 하고 뜸
});

// client.on('interactionCreate', async interaction => {
//     if (!interaction.isChatInputCommand()) return;
// 
//     if (interaction.commandName === 'ping') { //ping이라는 메세지를 전송시
//         await interaction.reply('Pong!'); //Pong! 이라고 답변이 감
//     }
// });

client.login(token.token); //로그인 토큰정보

저는 토큰이나 DB 정보같은 경우 config라는 폴더를 생성해서 따로 저장하는 편입니다.

토큰값은 직접 연결해줘도 문제없지만 저는 따로 추가했습니다!

 

+ 토큰 설정 [ config/token.json ]

{
	"token": "본인의 토큰값 넣기"
}

 

처음에 new Discord.Client(); 코드를 사용했는데(주석처리된 부분) 저는 intents 값이 덜 들어가있다고 자꾸 오류나더라구요ㅜㅜ

보니까 discord.js 가 v14로 올라오면서 명령어가 변경된거 같네요..

Client() 함수 안에 인자값을 설정해줘야하고 해당 값은 밑의 링크를 통해 해결했습니다.

GUILDS 가 어떻게 GatewayIntentBits.Guilds 로 변하다니 흑흑ㅜㅜ

이거때문에 서버 구동하는데 시간이 좀 걸렸네요ㅜㅜ

 

+ 솔루션 참고

https://jtuto.com/discord-js-invalid-bitfield-flag-or-number-guilds/

 

[SOLVED] Discord.js: Invalid bitfield flag or number: GUILDS - JTuto

This Content is from Stack Overflow. Question asked by Arman

jtuto.com

 

그렇게 로그인 토큰을 적용해서 node [파일명]을 입력해주시면 서버가 구동됩니다.

저는 갠적으로 nodemon을 설치해서 사용하는 편이어서 각자에 맞는 명령어를 입력해주시면 될 것 같습니다.

서버가 온라인으로 켜지는 것을 확인할 수 있습니다!!

 

기초코드는 discord.js 참고해서 추가했습니당!

https://discord.js.org/#/docs/discord.js/main/general/welcome

 

Discord.js

Discord.js is a powerful node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.

discord.js.org

https://discordjs.guide/

 

discord.js Guide

Imagine a guide... that explores the many possibilities for your discord.js bot.

discordjs.guide

 

++ 근데 저는 이거 서버에 메세지 보내도 안받아와지더라구여??

뭔가 서버 설정이 덜된건지 코드가 다른건지 아예 신호를 못받아와서;;;;;

나중에 해결법이랑 기능추가해서 돌아올게요..ㅎㅎ;;

 

 


+++ discord.js v14로 올라오면서 변경된 부분이 꽤 있는거같네요;;

interactionCreate 를 이용해서 메세지를 받아오는 예제를 사용했는데 저는 메세지를 올려도 반응이 없더라구요.

뭐가 문제인가했는데 intents 설정하는 부분에서 메세지 추가하는 빌더를 따로 추가해줘야했습니다..

 

const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages] });

GuildMessages를 추가적으로 생성해주시고

 

client.on('messageCreate', msg => {
  msg.reply("드디어 성공!");
});

interactionCreate 대신 messageCreate 를 이용해서 reply를 날려보았습니다.

 

드디어 성공했습니다ㅠㅠㅜㅠㅜㅠㅜ 아니근데 이거 reply가 5번이나 날아오더라구요 ㅋㅋㅋㅋㅋ

아주 중간이 없습니다. 화가 나네요.

 

최종으로 동작시킨 main.js 코드입니다!!

const Discord = require("discord.js");
const { Client, GatewayIntentBits, EmbedBuilder } = require('discord.js');
const client = new Discord.Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages] });
const token = require("./config/token.json");

client.once('ready', () => { 
  console.log(`Hello~ ${client.user.tag}!`);
});

client.on('messageCreate', msg => {
  msg.reply("드디어 성공!");
});

client.login(token.token);

명령어 받고 예외처리하는 부분은 나중에 추가해야겠네요.

메세지를 받아온것만으로 기쁘네요 ㅎㅎ

반응형
반응형

저는 steam이나 콘솔 게임도 정말 좋아하지만 도트감성의 쯔꾸르 게임도 정말 좋아합니다.

그 특유의 감성을 따라갈 수가 없는거같아요.

오늘은 제가 예전에 했던 happy end라는 게임의 후기를 적어볼려고 합니다.


름 : HAPPYEND(해피엔드)

장르: 약공포, 미스터리, 감동

플레이 타임: 약 4시간

 

https://yuki22.tistory.com/m/3

 

HAPPYEND.

제작자 : 코마츠(http://wildtiger0502.wixsite.com/komatsu-game) 게임 다운로드 ■제작 툴 RPG 쯔꾸르 VX Ace ■플레이시간 3~5시간 ■게임 소개 스토리 중시 어드벤처 게임입니다. 감각으로서는 어드벤처와 노.

yuki22.tistory.com

해당 링크로 들어가 게임을 다운받을 수 있습니다.

 

평소에 쯔꾸르 게임을 많이 찾아다니는데 명작 게임추천에서 봤던 기억이 있어서 플레이 해봤었습니다.

해피엔드는 주인공 '사쿠라'가 처음보는 카페에 들어가 드림패스를 받고 꿈을 꾸면서 벌어지는 일들입니다.

 

개인적으로 엄청난 쫄보인데 그렇게 무섭지도 않고 퍼즐 난이도도 안어려웠다고 느꼈어요ㅎㅎ

기본적으로 갑툭튀랑 도망치는 요소가 있긴 한데 스토리 진행에 방해되는 난이도는 절대 아니었습니다.

애초에 게임이 굉장히 친절해요ㅋㅋㅋㅋ

플레이어가 혹시 진행못할까봐 애들이 대화하면서

 

- 사무실로 가야할거같네요

- 사무실은 1층에 있었지?

 

이런식으로 힌트를 굉장히 많이줍니닼ㅋㅋㅋ 진행에 굉장히 도움을 많이줬어요..ㅎㅎ

게임만 하면 길을 못찾는 경우도 많은데 나를 따라오면 돼! 라고 얘기해주는 듯한 느낌으로

쉽게 진행할 수 있어서 길을 걱정도 없었습니다,,

게임을 하면서 사쿠라의 멘탈을 관리해줘야하는데(?) 1회차는 정말 툭하면 멘탈이 갈려서

맨날 곰돌이 보러 1층다녀서 조금 불편했던 기억이 있네요.

그래서 1회차에 사탕이 많이 나왔던건가 싶구,,,,,

 

게임은 총 3회차를 진행하면 진엔딩을 볼수있습니다.

1회차에서 1~5의 엔딩을 볼 수있고(플레이에 따라 추가적인 엔딩을 볼 수 있는데 그것까지 하면 6개)

2회차에서 6,7의 엔딩을 볼 수 있고 3회차에서 8과 해피엔딩(진엔딩)을 볼 수 있어요

 

원래는 검은 배경에 드림패스의 모습이 있는 그림이 메인화면에 있었지만

게임을 진행하면서 엔딩을 볼 때마다 메인화면의 모습이 변합니다(!!)

 

1회차 엔딩 후 메인화면

1회차 엔딩을 모두 마무리하면 볼 수 있는 메인화면인데 굉장히 예쁘죠ㅎㅎ

게임하면서 엔딩마다 캡쳐하는걸 까먹어서 1회차랑 진엔딩 후 메인화면 밖에 없는데

2회차 엔딩 역시 끝난 후의 메인화면이 굉장히 예뻐요ㅜㅜ

 

해피엔드 후 메인화면

사쿠라ㅜㅜㅜㅜ

사실 해피엔드 후 메인화면은 살짝 스포일 수 있긴하지만..ㅎㅎ

 

스토리는 굉장히 깔끔했습니다. 카나의 이야기는 뭔가 공감할수는 없었지만(...) 마지막은 정말 감동ㅜㅜㅜㅜㅜㅜ

회차를 거듭할수록 사쿠라가 절망을 이겨내고 앞으로 나아가는 모습이 너무 좋았어요 + 강해지는 멘탈

또 게임을 하면서 제작자가 게임을 엄청 공들여서 만든게 눈에 보여서 정말 좋았어요!

 

쯔꾸르 게임 내에서 캐릭터의 표정이 그렇게 다양하지 않는데 해피엔드는 정말 다양해요ㅋㅋㅋㅋㅋㅋㅋ

그렇기에 애들 감정변화를 알기도 더 쉽고 이입하기 더 좋았던 것 같아요!

엔딩 후의 메인화면이 전부 바뀌는것도 좋았고 애들의 속마음을 제외하고 모든 대사가 음성지원이어서 더 재밌었네요.

대사를 먼저 다 읽어도 음성 듣는재미도 있고..ㅎㅎ 일단 음성해주신 분들이 연기를 상당히 잘하시더라구여ㄷㄷ

엔딩을 보면 BGM이 추가 되어서 따로 들을 수 있고 직접 부른(!) 노래도 있어서 너무 대박입니다ㅜㅜㅜㅜ

마지막 엔딩 크레딧은 게임에서 나왔던 캐릭터들이 어떻게 살아가고 있는지를 보여주는데

직접 그린 만화로 보여주는 것에서 정말 정성이 대단하다는 걸 다시 한 번 더 깨달았습니다,,,,

제작자님이 해피엔드에 대한 애정이 정말 높았지않나 싶어요

그렇기에 또 좋은 작품이 나온 것 같습니다ㅎㅎ

 

플탐도 적절하고 몰입도도 높아서 재밌게 할 수 있는 쯔꾸르였습니다 갓-겜 해피엔드 한번씩 해보세요!!

 

반응형
반응형

안녕하세요 O_B입니다

다들 한번씩은 소재를 가져올때 배경과 선이 분리되지 않아서 불편했던 경험이 있지않을지싶어요!

저는 선만 따오는 방법을 익히지 못했을 때..

레이어 위로 직접 선을 그려본적도있고 흰배경만 아슬아슬하게 지워본적이있네요..ㅎㅎ

진짜 귀찮고 시간도 많이 뺏겼던 기억이 있습니다..ㅜㅜ

그래서 오늘은 그림에서 흰색 배경만 지우는 방법을 알아보겠습니다.


1. 파일가져오기

 

테스트를 위해 먼저 파일이 필요하겠죠!

검정 선을 따기 위해 저는 제가 그린 그림을 하나 들고오도록 하겠습니다.

[파일 - 열기] 를 이용하여 가져오기
[폴더] 클릭으로 가져오기

파일 가져오는 방법은 3가지가 있죠!

1. 파일 - 열기 를 통해 가져오기

2. 폴더 아이콘을 클릭하여 파일을 가져오기

3. 그림을 클튜에 직접 넣기

 

이렇게 3가지입니다!

저는 직접넣는것보다는 파일을 통해 가져오는게 더 편해서 주로 1 2번의 방법을 사용합니다..ㅎㅎ

 

 

저는 제가그렸던 메이플 썬콜 그림을 가져왔습니다!

저장했던 그림 그대로 들고와서 파일은 png 형태로 되어있습니다.

 

2. 그림 투명화

그러면 가져온 그림에서 흰배경은 지우고 검정색 선만 따야겠죠!!

먼저 흰 배경과 선이 같이있는 것을 확인해볼게요.

 

현재 그림에서 "투명픽셀잠금" 을 하고 레이어 위로 선을 그어보겠습니다.

투명픽셀잠금

 

먼저 레이어 속성에서 투명픽셀잠금을 하고 레이어 위로 선을 그어봤습니다.

처참하네요

ㅜㅜ 현재 배경과 선이 한 선화에 전부 있는 것을 알 수 있습니다.

얼른 선을 구분지어줘야겠습니다.

 

레이어를 원래 상태로 돌려준뒤에(그었던 선을 지우고 투명픽셀을 풀어주세요)

[편집 - 휘도를 투명도로 변환]

투명도 변환을 위해 [편집 - 휘도를 투명도로 변환] 을 클릭해주시면 됩니다.

 

 

휘도를 투명도로 변환 을 클릭하게 되면

이렇게 흰 배경이 사라지고 검정배경만 남는 것을 확인할 수 있습니다!

원하는 선만 남길수있어서 굉장히 편합니다.

 

그렇다고 선만 남은 것을 다시 확인해주기 위해 테스트를 진행해볼게요

아까처럼 위로 선을 그어줄겁니다.

레이어 속성에서 검정선만 남은 레이어는 투명픽셀 잠금으로 해주시고 밑에는 알아보기 쉽게 흰색레이어를 깔았습니다.

픽셀잠금을 진행한 레이어에서 선을 그어주면

 

 

선화의 색만 변경된 것을 확인할수있습니다!!

테스트끝났다고 투명픽셀 풀어버려서 캡쳐본에는 같이 찍히지않았지만 투명픽셀 누르고 선 그어주셔야합니다!!

 

흰색 배경은 사라지고 검정선만 남은것을 제대로 확인해볼 수 있죠.

이렇게 편하게 배경을 지우고 선만 가져오는 작업을 할 수 있습니다.

 

+ 배경은 흰색이 아니어도 휘도를 투명화하면 선만 가져올수있습니다!!

 

반응형
반응형

안녕하세요 OB입니다.

최근에 nodejs를 이용해서 웹 서버를 구축하는 작업을 해보고 있습니다.

nodejs는 강의로 조금.. 접해본 수준이어서 작업이 수월하지는 않네요ㅎㅎ

웹 서버를 구축하기 위해 DB와 연동하는 과정에서 많은 오류가 발생했는데

그중 가장 저를 🐶고생시킨 'TypeError: ~ is not a function' 에러를 확인해보겠습니다!

 


 

 

간단하게 오류문을 해석해보면 pool.query 함수가 함수로서 제대로 동작을 하지 않고 있는 것을 알 수 있습니다.

아무래도 nodejs를 많이 다뤄보지 않아서 여러 자료를 찾아보고 코드를 작성했는데

남들은 되는 코드가 저는 동작하지 않는 점이 굉장히 의문이 많이 들더라구요..

 

그래서 함수가 제대로 동작하지 않는 이유를 생각해보았습니다.

저는 두 가지의 경우를 떠올릴 수 있었는데

 

  1. 함수명이 겹치는 경우(이미 선언된 변수와 겹친 경우)

  2. 함수가 정의가 되지 않은 경우

 

이렇게 두 가지였습니다.

뭔가 이렇다 할만한 오류도 아닌거같은데 해결은 안되니 엄청 답답하더라구여.

pool.query를 함수로 만들려고 (); 붙이니 연결된 코드가 함수가 아니라고 하곸ㅋㅋㅋㅋㅋㅋ

 

1. 함수명이 겹치는 경우

저는 1번에 해당하는 오류로 function 에러가 발생했더라구여.

위의 사진에서 pool이라는 변수를 이용해 함수를 만들었는데 다른 코드에서 pool을 이미 사용하고 있어서

중복이 발생했다는..ㅎㅎ

굉장히 간단한 문제인데 이걸 일주일을 잡고 오류해결하고있었으니 이렇게 허무할수가 없더라구여

진짜 다 완성한 코드인데 이걸!! 이걸 일주일을!!!!@@@!!!!!!!!!!!!!!!!!

변수명을 안겹치게 다시 작성해준다면 문제없이 코드가 동작할 것입니다.

실제로 저도 pool에서 con이라는 변수로 변경하니까 오류없이 동작했습니다!!

 

2. 함수가 정의가 되지 않은 경우

함수를 사용하기 위해서는 먼저 정의를 해야하죠.

function이라는 명령어를 이용해 함수를 정의하고 그것을 이용하면 되는데

간단하게 코드로 살펴보면 이런식으로 구성할 수 있습니다!

ah라는 js파일을 만들어서 함수 sum을 정의하고 sum함수에 data1, data2에 각각 1을 넣어 console에 찍는 코드입니다.

코드를 실행해보면 이런식으로 2라는 값이 리턴되는 것을 확인할 수 있습니다.

 

그런데 만약,, console.log(sum(1,1));과 함수를 정의한 위치를 변경하면 값이 어떻게 나올까요?

이런식으로 코드를 변경하면.. 놀랍게도 콘솔에서 2라는 값이 출력되는 것을 확인할 수 있습니다!!

 

그렇기에 함수를 정의한 위치가 조금 달라진다고 하여 크게 오류날일은 없을 것이라고 생각하고

함수를 정의하지 않고 사용하는 경우는 거의 없으니까..?

혹시 정의가 되지 않았다면 아마 'ReferenceError: ~ is not defined' 에러가 발생할 것입니다.

이런 경우라면 함수 정의를 추가해주시면 됩니다.

 

1, 2번의 방법 모두 코드를 잘 확인해야한다는것이 개빡치네요

오류가 발생한다면 변수명은 정말 꼭 한번 다시 확인해보세요.

코드를 쓰다보면 비슷한 변수가 굉장히 많이 생겨서 헷갈리게 되는데

이부분에서 저도 오류 잡는데 한참 걸렸네요ㅜㅜ

반응형
반응형

안녕하세요 O_B입니다.

오늘은 타임랩스 기능을 이용해볼려고 합니다!

타임랩스란 움직임을 촬영하고 원래 속도보다 빠르게 보여주는? 기법이라고 할 수 있습니다.

 

클립스튜디오는 PRO / EX 이렇게 2가지의 버전이 있죠!

저는 현재 PRO 버전을 사용하고 있습니다. 애니메이션 그릴일은 없지 않을까.. 하구..ㅎㅎ(가격차이도 좀..)

PRO는 일반판, EX는 조금더 기능이 많은? 버전이라고 생각하면 편할거같아요.

 

타임랩스 기능을 이용하고 싶고 와콤 제품을 사용하고 있다면

와콤 드라이버를 최신 버전으로 업그레이드 해주셔야 기능이 정상적으로 작동합니다!

저는 아무리 찾아봐도 타임랩스 기능을 찾지 못해서 PRO는 타임랩스 기능을 이용하지 못하는 줄 알고

EX로 업그레이드 해야하나 고민을 많이 했었어요. 가벼운 낙서라도 타임랩스로 보면 더 재밌지 않을까..! 하는 마음에..

하지만! 와콤 드라이버 업데이트를 하지 않아 보이지 않는 거였더라구요ㅎㅎ

(클튜는 따로 업데이트 했던 기억이 없었어요! 최신 버전이라면 문제없이 동작할겁니다.)

 

제가 사용하고 있는 와콤 버전은 6.3.42-2 입니다. 업데이트가 또 생겼네요. 업데이트는 다음으로 미뤄야겠어요*^^*

(현재 와콤 드라이버의 버전은 '와콤 데스크탑 센터' 프로그램을 통해 알 수 있습니다.)


1. 타임랩스 기록하기

타임랩스 시작하기

업데이트를 했다면 타임랩스 기능을 어렵지 않게 찾아볼 수 있습니다.

[파일] - [ 타임 랩스 ] - [ 타임 랩스 기록 ] 을 누르면 타임랩스 시작을 결정할 수 있습니다.

 

해당 이미지의 화면이 뜬다면 OK버튼을 눌러 타임랩스 기능을 활성화 시키면 됩니다.

 

 

 

2. 원하는 그림 그리기

타임랩스 기능을 활성화 시켰다면 원하는 그림을 자유롭게 그리면 됩니다!

저는 최근에 그리고 있던 캐릭터로 타임랩스를 만들어 볼려고 합니다.

최근에 '스도리카' 라는 모바일 게임을 다시 열심히 해볼까싶어.. 시즌3 좋아하는 캐릭터를 그려보고 있었습니다!

 

바로 스도리카 수현! 공수현!!

한국계를 모티브로 한 물계파라 스킬도 이쁘고 이름도 너무 예뻐요.

무엇보다 스알 일러가 넘 이쁘게 뽑혔어요.

수현 얻을려고 70연 넘게 돌렸던거같은데 못 뽑은거 생각하니 마음이 아파오네요..

 

 

 

3. 타임랩스 저장하기

그림을 완성했다면 타임 랩스 내보내기를 누르면 됩니다!

타임 랩스 기록을 누른 시점부터 그린 그림을 빠르게 영상으로 보여주는 거에요.

저도 끝까지 완성은 하지 않고 중간만 녹화를 해봤습니다!

 

그런데 웬걸 동영상 올리는데 오류가 나네요ㅜㅜ

아쉽게도 녹화한 영상은 보여드릴 수 없지만 영상 저장에는 문제가 없습니다!

[ 타임랩스 내보내기 ] 를 클릭하면 이런 화면이 보이게 됩니다.

저는 잠깐 녹화해서 비디오 길이가 0초로 나오네요!

오랜 시간동안 작업해도 실제로 제가 그린부분들만 녹화가되고 빠른 재생이 되어 영상 길이가 그렇게 길게 나오지 않을거에요ㅎㅎ

 

비디오 길이, 크기, 비율 원하는대로 설정해주시고 OK 버튼을 눌러 원하는 파일위치에 저장해주시면 됩니다.

영상을 한 번 저장했다고 타임 랩스가 바로 꺼지는 것이 아니기때문에

혹시나 원하는 크기 비율이 아니라면 다시 설정해서 저장버튼을 누르면 됩니다!

 

타임 랩스를 켜놓은채로 작업하고 파일을 끈 경우 다시 돌아와도 타임랩스는 꺼지지않고

유지 되기 때문에 한번에 작업해야한다는 압박감은 가지지 않으셔도 괜찮습니다.

제가 그렸던 과정을 빠르게 보면 되게 재밌더라구요. 타임 랩스 기능 이용해보는걸 추천드립니다!

 

 

반응형
반응형

안녕하세요 오렌지빵 O_B입니다.

오늘은 클립 스튜디오 움직이는 짤을 만들어보겠습니다.

보통의 일러스트와 크게 다르지 않아 어렵지 않게 만들어볼 수 있습니다!

 


1. 움직이는 일러스트 레이어 만들기

 

움직이는 일러스트 레이어 만들기

 

먼저 움직이는 짤을 만들기 위해 편리한 레이어를 만들어야 합니다.

보통의 레이어로 만들어도 가능할것이지만 '움직이는 일러스트 만들기'를 클릭하고 레이어를 만들면 훨씬 편하게 만들 수 있습니다!

 

레이어 추가 버튼을 클릭하여 기본적으로 만들려는 움짤의 크기를 폭과높이를 이용해 설정해주고

'움직이는 일러스트 만들기' 버튼을 클릭해주고 원하는 셀과 프레임을 선택하고 레이어를 만들어주면 됩니다.

 

움짤을 위한 레이어 생성

레이어(파일)을 생성하고 난다면 애니메이션 폴더 안에 본인이 선택한 셀 수에 맞게 레이어가 생성된 것을 알 수 있습니다. 저는 셀 매수를 24로 선택하여 24번까지 있는 것을 알 수 있습니다!(사진이 잘렸지만 밑으로가면 1번까지 있습니다.)

 

 

 

2. 레이어 파일 채우기

레이어를 생성했으니 레이어를 채울 시간입니다!

본인이 원하는 움짤을 만들기위해 *1번 레이어* 부터 그림을 그려주시면 됩니다.

저는 캐릭터가 뒤를 보이는 상태에서 고개를 돌리는 모습으로 그려볼려고 합니다.

 

저의 클튜 화면입니다. 간단하게 뒤로 돌아있는 캐릭터를 그렸습니다.

선을 정리하지 않아 지저분하고 인체가 망가진 모습이 마음아프네요:)

가장 중요한 것은 제일 밑에 있는 *1번 레이어*에 그려줘야 하는 것입니다!!

 

 

 

3. 위의 레이어로 차례대로 올라가며 그리기

1번 레이어를 채웠다면 2번 레이어로 올라가면 됩니다.

 

2번 레이어 클릭시의 모습

2번 레이어를 클릭했을 때의 모습입니다. 1번 레이어에서 그렸던 선이 보라색으로 보이는 것을 알 수 있습니다.

즉 전에 그렸던 레이어를 보고 다음에 그릴 그림을 그리면 되는 것입니다!

일반 레이어로도 가능하지만 저는 따로 설정을 해주지 않아도 되는 것이 편리하게 생각되더라구여 :)

 

 

1번 레이어의 투명도를 42%로 조절하고(선이 너무 강하게 보여 살짝 줄였습니다! 본인의 가호에 맞게 조절하시면 됩니다.) 그 위에 올 그림을 그렸습니다. 이런식으로 위의 레이어로 올라가며 차례대로 그림을 그려가면 됩니다!!

 

 

그림이 더러워서 복잡해보이네요ㅎㅎ..

보라색으로 보이는 선은 이전의 레이어(3번 레이어), 초록색으로 보이는 선은 다음의 레이어(5번 레이어)를 보여주는 것입니다. 레이어의 투명도를 조절하여 보면 더 편리합니다!

이렇게 이전, 다음의 레이어를 확인하며 움짤을 그릴 수 있어 저는 편리했습니다.

 

4. 움짤 저장하기(.gif)
저는 의지가 약하여.. 6번레이어까지만 작성하고 움짤을 저장해볼까 합니다.

그림을 모두 그렸다면 마지막으로 저장만 해주면 됩니다.

 

움짤 저장 방법

움짤을 저장하는 방법은 어렵지 않습니다!

파일 - 애니메이션 내보내기 - 애니메이션 GIF 를 클릭해주면 됩니다.

다음 원하는 파일 위치를 선택하여 저장 버튼을 눌러주시면 됩니다.

 

저장버튼을 누르면 나오는 화면입니다.

애니메이션 gif 파일을 만들기 전 마지막 화면입니다!

출력하기 위한 애니메이션의 크기를 폭, 높이를 이용하여 조정해주시면 됩니다.

저는 6번 레이어까지 작성을 했고 약간의? 공백을 주고 싶어 7번 프레임(레이어)까지 4번 반복하게 설정했습니다.

모든 설정이 끝났다면 OK 버튼을 이용하여 움짤을 저장해주시면 됩니다.

 

움직이는 그림(움짤)

제가 그린 움직이는 그림의 저장본입니다!

선을 정리하지않고 저장하여 깨끗하지 못하네요ㅎㅎ

저는 반복횟수를 4회로 지정했지만 무한반복도 가능합니다!

 

모두 간단하게 원하는 움짤 많이 만드셨으면 좋겠습니다!

반응형

+ Recent posts