[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 이미지를 댓글로 그려만 주면 어느정도 끝이 보일 것 같다.
이미지 출처 : https://m.blog.naver.com/ohayuo/221499136132
- 이 글이 좋았다면 업보팅 부탁 드립니다.
- 따봉 감사히 받겠습니다.
- 발생 수익으로 카드 더 뽑아 봇사마 업글 가즈앗 !
- 열심히 만들어서 좋은 서비스로 보답해 보겠습니다.
- 기타 좋은 아이디어 있다면 댓글 부탁 드립니다.
- 긴 글 읽어 주셔서 감사합니다.
0
0
0.000
@wonsama님, steemzzang을 이용해 주셔서 감사합니다.
☀️ 가평 특산물 삼순이네 "된장 간장 고추장 청국장"
🌕 가평 운악산 삼순이네 청국장
⭐️ 팔자 팔어 뭐든 팔자
How can I accept Jesus Christ in my life? Comment what you understand of our topic.
Check our Discord 😍🤗❤
lucky2님이 wonsama님의 이 포스팅에 따봉(7 SCT)을 하였습니다.