Javascript

[PIXI] 이미지를 로드하여 texture -> sprite -> canvas에 add 하는 과정

이미지 로드 이미지로 작업하기 위한 첫 번째 단계는 웹 서버에서 사용자의 웹 브라우저로 이미지 파일을 가져오는 것입니다. 이를 PIXI.Texture.from()위해 빠른 데모용으로 작동하는 를 사용할 수 있지만 프로덕션에서는 Loader 클래스를 사용합니다. 로더는 요소를 사용하여 래핑하고 관리하여 브라우저에 이미지를 가져오도록 지시한 다음 완료되면 알려줍니다. 이 프로세스는 비동기식 입니다 . 로드를 요청한 다음 시간이 지나면 로드가 완료되었음을 알리는 이벤트가 발생합니다. BaseTextures는 데이터를 소유합니다 로더가 작업을 완료하면 로드된 요소에 필요한 픽셀 데이터가 포함됩니다. 그러나 무언가를 렌더링하는 데 사용하려면 PixiJS가 원시 이미지 파일을 가져와 GPU에 업로드해야 합니다. 이..

[PIXI] ticker 사용방법

전체 코드 const Application = PIXI.Application; const app = new Application({ width: window.innerWidth, height: window.innerHeight, transparent: false, antialias: true, backgroundColor: 0xAAAAAA }); app.renderer.backgroundColor = 0x23395D; app.renderer.view.style.position = 'absolute'; document.body.appendChild(app.view); const graphics = PIXI.Graphics; app.ticker.add(delta => loop(delta)); function..

[PIXI] PIXI.Text와 PIXI.TextStyle 사용 방법

기본 코드 const Application = PIXI.Application; const app = new Application({ width: window.innerWidth, height: window.innerHeight, transparent: false, antialias: true, backgroundColor: 0xAAAAAA }); //배경색 변경 app.renderer.backgroundColor = 0x23395D; //생성자가 아니더라도 이와 같이 크기 조정 가능 app.renderer.view.style.position = 'absolute'; document.body.appendChild(app.view); const style = new PIXI.TextStyle({ fontFa..

[PIXI] Graphic 클래스 활용하여 도형그리기

app.renderer vs app.view app.renderer는 내부 매커니즘이라면,(캔버스 요소 조정) app.view는 이미 만들어진 캔버스 자체 //배경색 변경 app.renderer.backgroundColor = 0x23395D; //css app.renderer.view.style.position = 'absolute'; Graphic 클래스 - 사각형 app.stage는 포토샵에서 레이어를 위로 계속 쌓아가는 느낌을 생각하면 쉽다. const graphics = PIXI.Graphics; const rect = new graphics(); rect.beginFill(0x00ff00) .drawRect(40, 40, 200, 250)//x좌표 y좌표 너비 높이 .endFill() app...

[React] fontawesome 리액트로 가져오기

https://fontawesome.com/v5/docs/web/use-with/react React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 위 세줄을 야무지게 다운받아 준다. npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome import React from..

[PIXI] app.view(사실상 캔버스 태그) 속성 살펴보기

app.view = pixi 도우미 클래스로 생성한 app.view는 결국 캔버스 태그이기 때문에 HTML Canvas 기초 전반은 한번 훑는 것이 좋다. 아래 링크가 전반적으로 잘 설명되어 있어서 첨부한다. https://unikys.tistory.com/274 [HTML5 튜토리얼] Canvas 기초 강좌 * 이번에는 HTML5의 강력한 기능 중 하나인 태그에 대해서 알아보자. 2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황 2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, unikys.tistory.com 관련 포스팅 app.view.style = CSSStyleDeclaration 관련 포스팅 즉 app.view는 캔버스..

[Pixi.js] 환경설정과 PIXI 객체 살펴보기

git init npm install pixi.js index.html에서 아래 추가 해주거나 npm으로 다운받지 않더라도 아래 라인을 추가해주면 된다. index.html PIXI STUDY 1 2 3 2022년 12월 21일 PIXI 환경설정과 기본 속성 학습 (Source1) (Source2) 위와 같이 예시 코드 작성 app.js const Application = PIXI.Application; const app = new Application(); 여기까지 해준 뒤, 콘솔에 PIXI를 작성하면, 펼쳐보도록 한다. 엄청나게 많이 나온다...👍 이제 실무에서 픽시는 export default class 고양이팝업 extends 기본팝업 { app: PIXI.Application | null; cl..

[Pixi.js] 픽시 공부 시작

https://youtu.be/_HjQTzpbRK4 회사 스택인 픽시를 아주 씹어먹어보고 싶어서 유튜브 튜토리얼 영상을 보고 따라해볼까한다. 나는 무언가를 각잡고 공부한다(시작한다)의 기준이 영상학습이다. 이 공부를 시작하게 된 계기는 다음과 같다. 회사에서 아이템이 겹칠 때 가장 위에 뜬 팝업의 버튼이 눌리지 않는 이슈가 있었는데, 버튼 아래에 다른 픽시앱 아이템과 겹쳤기 때문이다. 더 상세하게 기술하자면, 해당 픽시앱의 특정 플래그에 마우스 좌표상의 클릭 이벤트가 등록있었는데 위에 다른 팝업이 켜지는데도 플래그를 꺼주지 않았다. 따라서 추가 팝업이 열릴 때 픽시앱의 플래그를 끄고, 추가된 팝업이 다시 닫힐 때 픽시앱의 플래그 켜는를 추가하여 이슈는 해결하였다. 이 과정에서 스스로 아쉬웠던 점은 이펙티..

[JavaScript] document.getElementsByClassName() - 특정 class를 가지고 있는 dom 요소들을 찾기/가져오기

https://mine-it-record.tistory.com/494 [JavaScript] document.getElementsByClassName() - 특정 class를 가지고 있는 dom 요소들을 찾기/가져오기 (ft. elem javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementByClassName()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 class를 가지고 있는 모든 dom 요소에 접근하기 mine-it-record.tistory.com https://developer.mozilla.org/ko/docs/Web/API/Node/insertBefore Node.insertBefore() - Web API | MDN N..

[node] express 설치 환경 조성해보기

폴더 만들고 1. npm init --yes 2. npm install express 3. package.json 을 아래와 같이 변경 { "name": "1.express-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"nodemon app" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.18.2" } } 4. npm i nodemon --save-dev 하고(내 피씨에 노드몬이 전역으로 깔려있..