[sm] 카드정보 댓글로 만들어주기 003 - 이미지 생성처리

결과물

특징 소환사와 몬스터의 표현 방식이 약간 상이함으로 주의해야 됨. ( 소환사는 어빌리티 표현 영역에 가감되는 능력치가 표현됨에 따라 표시 방식이 다름)

추후 카드 번호를 입력 받아야 되기 때문에 추가처리

폰트는 맑은 고딕으로 일단 처리

하단 스텟 부분도 정렬하면 좀 더 깔끔할거 같은데 별로 인것 같아 그냥 좌측 정렬

입력값으로 카드번호, 리그정보- 기본은 챔푠(챔푠(c),다이아(d),골드(g),실버(s),브론즈(b),노비스(n))를 입력받아 자동으로 최대 레벨로 맞춰 해당하는 카드의 능력치 정보를 보여주도록 설계.

스텟 하단 부분 빈 공간에 한줄 의견등을 입력 받아 추가하여 동적 이미지 만들어 주는 것 또한 고려 (한글 기준 약 20자 내외 정도 가능 할 듯 )

관련 소스 (nodejs)

이미지를 랜더링 할 때 좀 더 신경 쓰면 성능이 올라갈 것을 예상하지만 시간이 있을련지. 또한 이미지 유틸 성능을 좀 더 업글하면 중복되는 코드를 좀 더 줄일 수 있을거 같은데 (드랍쉐도 같은거 ... ) 일단 PASS 함.

/// 스몬 카드를 그려준다 ( 기본 리그는 챔피온 등급 ) const draw_sm_card = async (details, idx, league='c') => { let background = await wcanvas.load_image(`./static/sm/cards/${idx}.png`); let target = details[idx-1]; let mleague = LEAGUE_INF[league].lv; // 여기서 undeifned 가 나온다면 이전 값 처리 문제임, 반드시 정의 된 값만 입력 되어야 됨.별도 유효성 검증 안함. let mlv = mleague[target.rarity-1]; let stats = _get_stats(details, idx, mlv); // 하단 이미지 - 어빌리티 let acnt = 0; // 어빌리티 반복 그리기용 카운터 if(target.type.toLowerCase()=='summoner'){ for(let [k,v] of Object.entries(stats)){ if(k == 'mana') continue; // 마나는 별도로 처리 하지 않음 if(v!=0){ let _img = await wcanvas.load_image(`./static/sm/stats/${STATS_IMG[k]}.png`, 50, 50); wcanvas.draw_over_with(background, _img, 45+acnt*55, 330); wcanvas.draw_text_with(background, `${v>0?'+':'-'}${v}`, 52+2+acnt*55, 335+2, 28, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `${v>0?'+':''}${v}`, 52+acnt*55, 335, 28, "나눔고딕", 0, "white"); acnt++; } } }else{ // 몬스터 for(let name of stats.abilities.split(',')){ // 이미지 - 어빌리티 let _img = await wcanvas.load_image(`./static/sm/abilities/${name.toLowerCase().replace(/\s/gi,'-')}.png`, 50, 50); wcanvas.draw_over_with(background, _img, 45+acnt*55, 330); acnt++; } // 이미지 - 어텍 ( 1 ~ 3 으로 다양함 ) let attacks = await _get_attacks_images(stats); let atk_cnt = 0; for(let a of attacks){ wcanvas.draw_over_with(background, a.img, -10, 140 - 70*atk_cnt); wcanvas.draw_text_with(background, `${stats[a.type]}`, 16+2, 155+2- 70*atk_cnt, 30, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `${stats[a.type]}`, 16, 155- 70*atk_cnt, 30, "나눔고딕", 0, "white"); atk_cnt++; } // 이미지 - 스피드 let _img_speed = await wcanvas.load_image(`./static/sm/stats/speed.png`, 60, 60); wcanvas.draw_over_with(background, _img_speed, 0, 210); wcanvas.draw_text_with(background, `${stats.speed}`, 18+2, 220+2, 30, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `${stats.speed}`, 18, 220, 30, "나눔고딕", 0, "white"); // 이미지 - 실드 if(stats.armor && stats.armor>0){ let _img_armor = await wcanvas.load_image(`./static/sm/stats/defense.png`, 60, 60); let _gap_armor = stats.armor < 10 ? 5 : 0 wcanvas.draw_over_with(background, _img_armor, 240, 150); wcanvas.draw_text_with(background, `${stats.armor}`, 255+2+_gap_armor, 160+2, 30, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `${stats.armor}`, 255+_gap_armor, 160, 30, "나눔고딕", 0, "white"); } // 이미지 - 체력 let _img_health = await wcanvas.load_image(`./static/sm/stats/health.png`, 60, 60); let _gap_health = stats.health < 10 ? 5 : 0 wcanvas.draw_over_with(background, _img_health, 240, 210); wcanvas.draw_text_with(background, `${stats.health}`, 255+2+_gap_health, 220+2, 30, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `${stats.health}`, 255+_gap_health, 220, 30, "나눔고딕", 0, "white"); } // 이미지 - 마나 let _img_mana = await wcanvas.load_image(`./static/sm/stats/stat_bg_mana.png`, 75, 75); wcanvas.draw_over_with(background, _img_mana, 0, 0); wcanvas.draw_text_with(background, `${stats.mana}`, 26+2, 12+2, 40, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `${stats.mana}`, 26, 12, 40, "나눔고딕", 0, "white"); // 이미지 - 카드 번호 그려주기 wcanvas.draw_text_with(background, `#${idx}`, 200+2, 15+2, 35, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `#${idx}`, 200, 15, 35, "나눔고딕", 0, "white"); // 텍스트 - 이름 wcanvas.draw_text_with(background, target.name, 30, 292, 20, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, target.name, 28, 290, 20, "나눔고딕", 0, "white"); // 텍스트 - 레벨 wcanvas.draw_text_with(background, `★ ${mlv}`, 30+205, 292, 20, "나눔고딕", 0, "black"); wcanvas.draw_text_with(background, `★ ${mlv}`, 28+205, 290, 20, "나눔고딕", 0, "white"); // 이미지 파일 저장 wcanvas.save_png_with(background, './test.png'); }

맺음말

아마 다음 시간에는 위 기능을 이용하여 미리 개별 이미지를 모두 만들어 놓은 후 ( 동적으로 만들면 시간이 넘 걸리니 ... ) 해당 이미지를 합쳐서 하나의 이미지로 만들어 주는 작업을 해보려 한다. 그리고 대전 링크 정보를 파싱하여 vs 이미지를 댓글로 그려만 주면 어느정도 끝이 보일 것 같다.