[Phaser.js] First step - jump into the whole new world! & Introduction to Javascript
#1 공부 진행 방법
코드카데미 커리큘럼을 일단 따라가면서 진행해보기로 마음먹었다.
많은 내용을 설명하기보다는 간략하게 설명하는 것은 잘 되어있는게 장점이라고 생각해서 조금은 캐주얼하지만 대충배우지는 않는 느낌으로 학습하기 딱 좋은 곳인 것 같아서 일단 여기서 좀 익혀보고 필요하면 공홈을 참고하고 오픈소스들을 참고하여 더 업그레이드 해나가기로 하였다.
첫 화면에서 이렇게 반겨준다. 네, 저도 자바스크립트에 관심있고 게임 만드는 것에도 마침 관심있는데.. 잘 부탁드립니다~🤓🤓🤓
Welcome page 번역본
비디오 게임. 이 두 단어는 대부분의 사람들의 관심을 끌기에 충분하며 당신을 여기로 데려온 두 단어일 가능성이 매우 높다. 여러분은 "비디오 게임이 사람들에 의해 만들어지나요?", "내가 이 게임들을 만드는 사람들 중 하나가 될 수 있을까요?", "저 케이크가 거짓말인가요?"라고 궁금해 할 수도 있습니다. (처음 두 개에 대한) 대답은 '그렇다'입니다!
HTML, JavaScript, Phaser를 조합하여 비디오 게임을 구축함으로써 이 기술 경로를 통해 필요한 기술을 습득할 수 있습니다. 결국, 실제로 그것을 직접 경험하는 것보다 더 좋은 답을 찾는 방법이 있을까?
HTML은 웹 페이지를 만드는 데 사용되며, 자바스크립트는 웹의 사실상의 언어이지만, Phaser는 무엇인가? 페이저는 우리에게 브라우저 기반 게임을 빠르게 만들 수 있는 많은 도구를 제공하는 미리 작성된 코드 모음인 오픈 소스 게임 개발 프레임워크입니다! 페이저는 자바스크립트를 사용하여 개발되었으며 리처드 데이비가 개발을 주도하고 있다. 이러한 게임 구성 도구를 능숙하게 사용하려면 숙련된 바닐라(보통의) 자바스크립트를 작성하는 방법도 배워야 합니다.
뭐 하실 건가요?
게임 개발의 세계로 뛰어들기 전에 먼저 변수, 함수, 배열, 반복기 및 객체를 만드는 강력한 자바스크립트 기반을 구축해야 한다. 기초를 배우면서 이러한 개념들이 Paser에 어떻게 들어맞는지를 맛볼 수 있을 것이다. 방금 배운 바로 그 자바스크립트 기술을 사용하여 몇 가지 핵심 기능이 빠진 Phaser 게임을 완료해야 합니다! 또한 Phaser 게임이 어떻게 구성되어 있는지에 대한 초기 감각을 얻을 수 있습니다.
이러한 게임에는 다음이 포함됩니다 : business outfitted Bob, Electric Mouse
샘플 게임과 함께 자바스크립트 부분을 완성한 후에는 Phaser와 게임 개발의 세계로 뛰어들 것이다.
초점은 Phaser 프레임워크와 게임 제작 뒤의 사고 과정을 사용하는 것에 더 중점을 둘 것이다. 또한 수업을 통해 JavaScript 기술을 계속 연마하고 Paser 게임을 빛나게 하는 고급 기술로 마무리할 수 있습니다. 이 섹션의 게임은 다음과 같습니다:
코디 점프
모험 만들기
여러분의 마지막 과제는 여러분이 배운 모든 것을 캡슐화하고 더 많은 것을 배울 수 있도록 하는 캡스톤 프로젝트입니다!
그러니 HP가 한계에 도달했는지, 마력이 충분한지, 체력이 충분한지 확인하십시오. 완전히 새로운 세계로 뛰어들 시간입니다!
#2 결심의 계기?
단순히 Phaser.js를 익히는 것뿐만 아니라 vanilla Javascript가 탄탄하지않으면 게임을 잘 만들 수 없다는 부분에서 매우 공감이 돼서 없는 시간도 쪼개서 게임을 만들어보려고 하는 것인데, 예를 들어 iterator는 아직도 뭐하는 놈인지 어떻게 쓰는건지 잘 모르는데 이건 정말 치명적인 것 같아서 공부는 해야겠는데 엄두가 안나고... 게임을 만드는데 필요하다고 하면 좀 더 눈에 불을켜고 공부하지 않을까 싶어서 이 커리큘럼을 꼭 해야겠다고 다짐했다.
내 공부 흐름을 예상해보자면, 게임을 만들다가 iterator 개념이 등장함 -> 그 순간 이터레이터에 대한 나의 이해도가 아직도 낮은 수준임 -> 게임을 만드는데 어려움을 겪음 -> iterator를 완벽하게는 아니어도 게임을 만들 수 있는 수준까지는 공부하게 됨 -> iterator 공부의 필요성을 느껴 게임 만드는 속도가 느려지고 iterator를 좀 더 깊게 공부하고 포스팅을 하나 하면서 이해도가 높아짐 -> 다시 게임 만드는 진도를 나감
이렇게되면 매우 이상적이겠다는 생각이 들었다. 다만, 내 예상과 같이 흘러가지는 않는게 인생이기 때문에 최대한 내가 컨트롤 할 수 있는 범위 안에서 필요하다고 생각되는 공부를 최대한 할 수 있도록 중간중간 계획을 잘 재조정해야겠다. 예를 들어, iterator를 어느정도 깊이까지 공부하고 넘어갈 것인지 정하고 개념정리한 뒤에 게임에서 한 번 사용해보고 일단 넘어간다. 다음에 또 사용할 일이 생기는 경우에 다르게도 사용해보며 이해의 깊이를 높일 수 있도록 해야겠다.
대략 이런게임들을 만들거라고 하면서(도트감성 너무좋구요..) 마지막 챌린지는 그동안 기모은 것들을 응축한 캡스톤 프로젝트가 될거라는데 캡스톤이 무엇인지 모르겠어서 찾아보았다. someone's greatest achievement or the greatest part of something 이라는데 그렇게 거창한 결과물일지는 모르겠지만... 내가 배운 모든 것들의 집합체라고 이해하고 커리큘럼의 마무리를 잘 해봐야겠다.
So make sure your HP is maxed out, your mana is plenty, and your stamina is full. It’s time to jump into a whole new world!
HP와 mana 그리고 stamina가 충분한지 체크하라니 게임적인 마무리 멘트가 맘에든다. 레고~~
저작권 문제가 있을 수 있으므로 학습하는 과정에서 사용하는 이미지 같은 경우 대체 이미지를 사용하거나 코드도 내가 변형해서 올릴 예정이다. 저작권 이슈는 너무 무서워😢
아무것도 안했는데 일단 한 단계 했다... ㅋㅋㅋ 바닐라 자바스크립트로 만드는 것을 배우니 자바스크립트 실력이 부족한 나에게 참 좋은 시간이다. 얼른 다음 단계를 해보자.
자바스크립트를 아예 처음 배우는 사람은 이 게시물을 보지 않을 것 같으므로 초반의 단계는 요약만하고 넘어가도록 하겠다.
#3. Introduction to Javascript
(1) What is JavaScript?
: 자바스크립트를 Codecademy에서 처음 시작하는 언어로 수백만명이 선택했다고 하면서, 계속해서 진화하고 많이 사용되며 웹을 이루는 근간이기 때문에 매력적인 언어이다~ 자바스크립트의 코딩 컨셉을 배운다는데 기초부분은 아는 부분이 많긴하니까 빠르게 풀면서 벽에 부딪힐 때까지 진행해보겠다.
(2) Console : 콘솔
console은 키워드이다. 키워드는 자바스크립트가 자체적으로 인식해서 미리 설정된 기능을 한다. 변수로 선언하면 안된다~!! 특정 변수의 값을 확인하거나 개발자도구에서 이해하기 힘든 개념들 특히 프로미스, 이벤트 이런 객체들을 콘솔로그로 확인해보면 이해도가 조금 더 상승하는 느낌이다. 물론 그것을 해석을 잘 해줘야한다.
(3) Comments : 주석
주석.. 이하 생략한다. 내가 짜놓은 코드도 나중에 해석하기 힘드니까 주석을 다는 습관을 들이자!
(4) Data types : 자료형
Number, String, Boolean ... 은 생략하고 몇 가지 개념만 다시 복습해보자.
Null: 이 데이터 형식은 값이 의도적으로 없음을 나타내며, null 키워드(따옴표 없음)로 표시된다.
Undefined: 이 데이터 유형은 키워드 undefined(따옴표 없음)으로 표시됩니다. 또한 null과 다른 용도를 가지지만 값이 없음을 나타낸다. 지정된 값이 존재하지 않음을 의미한다.
Symbol: 언어의 새로운 기능인 기호는 더 복잡한 코딩에 유용한 고유 식별자이다. 지금은 이것들에 대해 걱정할 필요가 없다는데... 언제 쓰는것일까..?!
(5) Arithmetic Operators : 연산자
(6) String Concatenation
(7) Properties : 속성
변수를 선언하면 컴퓨터는 각 자료형의 instance로 저장한다. 따라서 각 자료형의 속성에 각각의 변수가 접근할 수 있다. 예를 들어 우리가 진짜 많이 사용하는 string 안의 속성 length가 있다.
(8) Methods
(9) Built-in Objects
uhmmm... 얼른 기초 다 넘기고 빨리 게임 만들어야겠다.. 다음 포스팅도 자바스크립트 기초 부분일거라 굉장히 많이 생략되어있을 것 같고 굳이 안봐도 되는 분들은 다다음 포스팅을 참고하기 바란다..!!!