여러분 안녕~~~~
장스 조이 코딩 샘 입니다~!!

제3강에서 스크래치 구성과 메뉴 설명(완전 기초)를 보고 오셨으니
이제 자세히 아주 쉽게 접근 해보도록 하죠.
다시한번 말씀 드리지만 이 강의 아주아주아주아주아주 초보도 이해 시켜 드리기
위한 목적으로 연재 하고 있으니, c언어,c++, 파이썬, 자바, 안드로이드 등등
잘하시는 분은 맨 밑에 하트만 한번 눌러 주시고 가셔도 되요ㅎ

오늘은 무대와 스프라이트에 대해서 이야기 해보도록 하죠.
실제 명칭은 무대와 스프라이트라고 하지만
이해하기 쉽게 제목에 써있는 것 처럼 고양이의 방(무대) 스프라이트(방의 가구 및 물건)을
살펴 보도록 하죠.
먼저 고양이의 방의 크기는 약 24평의 원룸이에요.
정확한 사이즈는 방의 가운데를 0,0이라고 기준을 잡는거에요.

X 좌표 : 0, Y좌표 : 0를 보실 있어요.
고양이의 방에 마우스를 올려 놓고 움직이시면

오른쪽 하단에 X : 0 , y : 0 이곳이 변하는 것을 두눈으로 똑똑히 보실 수 있어요.
이제 왼쪽 상단으로 마우스를 이동하면 X = -240, Y =180이라는 값을 보실 수 있어요.

가운데 중심으로 왼쪽으로 이동 했으니 X값은 마이너스가 되겠죠?
오른쪽도 마찬가지로 가운데 중심을 기준으로 하면 X값은 뭘까요?
그냥 대답하지 왜 묻냐 이생각 하셨죠?ㅋㅋㅋㅋ
네 맞습니다. X = 240입니다.
이 고양의 집의 가로 축 길이는 480 입니다.

가운데 중심으로 -240, +240
자 다음으로 세로로 움직일 수 있는 길이는 얼마나 될까요?
마우스를 움직여 보시면 알겠지만.

총 세로길이는 360으로 가운데 중심으로 +180, -180으로 구성되어 있습니다.
왜 우리가 남의 방 사이즈를 알아야 되냐고요??
이걸 알아야 실제 코딩을 할 수 있어요
우리집이 몇평이 되는지 내 방이 얼마나 되는지 알아야
가구나 물건의 위치를 정할 수 있고
그 물건의 위치가 어디에 있는지 알아야 고양이 잘 피해 다닐 수 있을테고!!!
아주 사소한 내용인거 같지만 기초는 배신하지 않는다~~~
ok???????????

자 이제는 내 방안에 뭐가 있는지를 볼까요?

떡하니 고양이 한마리만 있네요.
스프라이트라는 이름을 가진 고양이네요~~
스프라이트 생각하니
밑에 생각하셨다면 아재아재~~
님 이름도 뺄께요~ㅋㅋㅋㅋ

자 고양이를 클릭 해보세요~~
더블클릭은 막 해도 변화가 없을거에요.
고양이에 마우스를 올려 놓고 오른쪽 버튼을 눌러 보세요.

인포, 복사 , 삭제 등등을 보시면 해내신겁니다!!!

그럼 다같이 인포를 눌러 볼까요~
인포는 각각의 스프라이트(동물, 가구, 물건 등등)의 대한 정보가 나와요.

해당 동물의 이름을 바꿀 수도 있고 방향을 바꿀 수도 있고
보이게 할 수도 있고 없어지게 할 수도 있고
저희도 집에서 가구의 위치나 방향등을 바꿔 줄 수 있잖아요? 똑같습니다.
키우시는 애완동물에 이름을 붙여 주시는것 처럼~~

저는 고양이의 이름을 장스 조이 코딩 샘~~이라고 바꿔 줬어요.

자 다음으로는 아주 작은 뭔지 모를 아이콘들이 있는데
뭔하는 녀석들인지 한번 봅시다.
그대...벌써 지친건 아니죠?
자꾸 인터넷 오른쪽 위에 있는 X표시를 누르고 싶나요?
핸드폰 뒤로가기 버튼을 누르고 싶나요..?

조금만 더 힘내세요!!ㅎㅎ
자 첫번째 아이콘을 누르면 저장소에 있는 스프라이트를 선택
짜잔~~~
고양이 말고도 이렇게 많은 아이템들이 있답니다.
이케아 같네요. 엄청납니다. 없는게 없어요~

저는 곰을 좋아해서 24평 원룸에 곰을 한번 추가해야 겠어요.

클릭을 빠르게 빠빰!! 하면

고양이를 깔아뭉개는 곰돌이가 추가 된걸 보실 수 있어요.
곰과 고양이를 마우스로 각각 움직여서 이미 둘이 있기도 작은 원룸에서 배치시켜 주세요.

서로 분리시켜 놓으니 한결 평안하네요.

자 다음은 이어서 아주 작은 아이콘 2탄 새 스프라이트 그리기라는게 있습니다
이것은 무엇이냐

직접 내가 방안에 넣을 것을 그릴 수 있다라는 것이죠!!!
대단합니까? 오바라고요?!!
실제로는 얌전합니다.

아래와 같은 영역에 그림을 그려보세요~

저도 제가 좋아하는 캐릭터를 하나 그려보려고요~~~
원을 하나 그리고~~

색칠을 한다음에 또 다시 원을 3개 그리고~~

그 위에 색을 더하고 그림을 이어 나갑니다.

두두둥....누군지 다들 아시나요?
보노보노를 그려봤어요~~ㅎㅎ
닮았으려나~~

실제로는 이렇게 생겼어요~~

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
자 다 그리셨으면 다시 처음으로 돌아가보죠~

어떠십니까. 원룸에 얼굴만 있는 보노보노와 장스 조이 코딩 이름을 가진 고양이와 곰돌이가 있네요.

그리고 마지막으로 작은 아이콘 2가지를 보면
하나는 그림이나 사진을 불러 오는거~
여러분의 사진이나 아이들의 사진을 불러와서 방안에 둘 수 있어요~

혹시 노트북에 캠이 있으신 분들은 바로 사진을 찍어서 추가 할 수도 있습니다.
이제 다 추가했으면 처음 상태로 돌아가기 위한 마지막 버튼.
밑에 그림을 참조 해주시고요~

짜잔!!!
처음화면으로 돌아왔습니다.
스프라이트창을 보면 각각의 구성원들을 보 실 수 있어요^^!!!!

와 여기까지 보시거나 따라하셨다면 대단하신겁니다.
거짓말 같지만 컴퓨터를 많이 만져보신분이라면
어렵지 않겠죠~당연한거죠.
하지만 비 전공자들과 처음 접해보는 초딩 중딩 고딩, 그외에 엄마 아빠들
이것 조차 어려워 하시는 분들 많아요~
최대한 아주아주아주아주 쉽게 상세하고 기초적인 부분까지
설명드릴려고 노력 했는데 어떠셨나요?

모두모두 고생하셨습니다.
자 다음 이시간에는 조금더 어려운?
하지만 쉽게 설명 할 실제 코딩영역을 진행 할거에요~
기대 많이 해주시구용~
그럼 이만 장스 조이 코딩 샘은 물러갑니다.
휘리리릭 뿅뿅!!!

자네 밑에 하트 한번 눌러 주고 가시겠는가!!? 부탁한다네!!!