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

in #zzan11 months ago

이전 글 보기

그려주기

어제 다운로드 받은 그림 위에 덧그리기를 진행 하면 됩니다.

  • 스킬정보
  • 스텟정보
  • 그리고 부가적으로 레벨에 따른 처리

결과물

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

  • 추후 카드 번호를 입력 받아야 되기 때문에 추가처리
  • 폰트는 맑은 고딕으로 일단 처리
  • 하단 스텟 부분도 정렬하면 좀 더 깔끔할거 같은데 별로 인것 같아 그냥 좌측 정렬
  • 입력값으로 카드번호, 리그정보- 기본은 챔푠(챔푠(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

  • 이 글이 좋았다면 업보팅 부탁 드립니다.
  • 따봉 감사히 받겠습니다.
  • 발생 수익으로 카드 더 뽑아 봇사마 업글 가즈앗 !
  • 열심히 만들어서 좋은 서비스로 보답해 보겠습니다.
  • 기타 좋은 아이디어 있다면 댓글 부탁 드립니다.
  • 긴 글 읽어 주셔서 감사합니다.
Sort:  

lucky2님이 wonsama님의 이 포스팅에 따봉(7 SCT)을 하였습니다.



How can I accept Jesus Christ in my life? Comment what you understand of our topic.
Check our Discord 😍🤗❤