Skip to content

Latest commit

 

History

History
318 lines (301 loc) · 13.9 KB

README.md

File metadata and controls

318 lines (301 loc) · 13.9 KB
Raw

Dota 2 Chat Emoticons

The recently added Dota 2 Chat Emoticons from the compendium stretch goal as GIF and CSS animation for the use on your website/forum/etc.

Demo (GIF)

32x32px

:wink: :blush: :cheeky: :cool: :crazy: :cry: :disapprove: :doubledamage: :facepalm: :happytears: :haste: :hex: :highfive: :huh: :hush: :illusion: :invisibility: :laugh: :rage: :regeneration: :sad: :sick: :sleeping: :smile: :surprise: :aaaah: :burn: :hide: :iceburn: :tears: :techies: :fail: :goodjob: :headshot: :heart: :horse: :grave: :ti4copper: :ti4bronze: :ti4silver: :ti4gold: :ti4platinum: :ti4diamond: :dac15_blush: :dac15_surprise: :dac15_cool: :dac15_duel: :dac15_frog: :dac15_face: :dac15_nosewipe: :dac15_stab: :dac15_transform: :pup: :bts_bristle: :bts_godz: :bts_lina: :bts_merlini: :bts_rosh: :cocky: :devil: :happy: :thinking: :tp: :salty: :angel: :blink: :snot: :stunned: :disappear: :fire: :bountyrune: :troll: :gross: :ggdire: :ggradiant: :yolo: :throwgame: :aegis2015: :eyeroll: :charm_blush: :charm_cheeky: :charm_cool: :charm_crazy: :charm_cry: :charm_disapprove: :charm_facepalm: :charm_happytears: :charm_highfive: :charm_huh: :charm_hush: :charm_laugh: :charm_rage: :charm_sad: :charm_sick: :charm_sleeping: :charm_surprise: :charm_wink: :charm_smile: :charm_onlooker: :eaglesong_2015: :wrath: :snowman: :healed: :drunk: :trophy_2016: :pa_kiss: :arcane_rune: :fuming: :axe_laugh: :dizzy: :zipper: :blush_smile: :nervous: :surprise_blush: :luna_love: :dead_eyes: :giff: :thumbs_up: :thumbs_down: :money: :unicorn: :naga_song: :poop: :aegis_2016: :tear: :reaver_2016: :bc_100: :bc_fire: :bc_ok: :bc_check: :bc_eyes: :bc_frog: :bc_flex: :cocky_ti6_charm: :devil_ti6_charm: :happy_ti6_charm: :thinking_ti6_charm: :tp_ti6_charm: :angel_ti6_charm: :hex_ti6_charm: :snot_ti6_charm: :stunned_ti6_charm: :disappear_ti6_charm: :fire_ti6_charm: :gross_ti6_charm: :yolo_ti6_charm: :throwgame_ti6_charm: :eyeroll_ti6_charm: :lifestealer_ti6_charm: :heal_ti6_charm: :drunk_ti6_charm: :salty_ti6_charm: :chicken_ti6_charm: :legion_commander_t16_charm: :underlord_ti6_charm: :monkey_king_ti6_charm: :fall_2016_trophy: :jugg: :no: :recharge: :dunno: :exclamation: :venom: :brood_love: :darkmoon_chicken: :bladeform_legacy: :grimace: :aegis_2017: :gem: :plant: :relieved: :foggy: :eh: :flex: :gg: :donkey: :kiss2: :observer_ward: :lick: :laugh2: :sentry_ward: :whew: :gyro: :nerd: :confounded: :joke: :siltbreaker: :mischief: :heykid: :huff: :beg: :kisskiss: :snort: :sweat: :chuckle: :stars: :wait: :sleep: :bawl: :team_eg: :team_eg_silver: :team_eg_gold: :team_dc: :team_dc_silver: :team_dc_gold: :team_ehome: :team_ehome_silver: :team_ehome_gold: :team_exe: :team_exe_silver: :team_exe_gold: :team_mvp: :team_mvp_silver: :team_mvp_silver: :team_nb: :team_nb_silver: :team_nb_gold: :team_og: :team_og_silver: :team_og_gold: :team_wings: :team_wings_silver: :team_wings_gold: :team_af: :team_af_silver: :team_af_gold: :team_complexity: :team_complexity_silver: :team_complexity_gold: :team_faceless: :team_faceless_silver: :team_faceless_gold: :team_igv: :team_igv_silver: :team_igv_gold: :team_lfy: :team_lfy_silver: :team_lfy_gold: :team_cloud9: :team_cloud9_silver: :team_cloud9_gold: :team_vp: :team_vp_silver: :team_vp_gold: :team_wg: :team_wg_silver: :team_wg_gold: :team_lgd: :team_lgd_silver: :team_lgd_gold: :team_liquid: :team_liquid_silver: :team_liquid_gold: :team_ig: :team_ig_silver: :team_ig_gold: :team_infamous: :team_infamous_silver: :team_infamous_gold: :team_tnc: :team_tnc_silver: :team_tnc_gold: :team_fnatic: :team_fnatic_silver: :team_fnatic_gold: :team_secret: :team_secret_silver: :team_secret_gold: :team_hellraisers: :team_hellraisers_silver: :team_hellraisers_gold: :team_empire: :team_empire_silver: :team_empire_gold:

(24x24px and 16x16px variants also included)

Installation & Usage

Just copy the assets folder into your project and refer to the corresponding gifs in your HTML.

To use the CSS animation version with the PNGs embed the assets/stylesheets/dota2-chat-emoticons.css into your HTML and use like this:

<i class="d2ce wink"></i>
<i class="d2ce blush"></i>
<i class="d2ce cheeky"></i>
...

Recommendation: For highest quality, use the CSS Animation since PNG supports alpha.

Update Workflow

In case Valve adds more emoticons:

You will need graphicscmagick/imagemagick (apt-get install graphicsmagick on Debian/Ubuntu) and Ruby (get it e.g. via rvm.io) to run the generator.

  1. Extract the emoticon source images from the VPK using a tool such as https://github.com/SteamDatabase/ValveResourceFormat. The source image are inside panorama/images/emoticons.
  2. Export an environment variable EMOTICON_SRC that points to this folder.
  3. Run bundle to get the required packages for the generator
  4. Run ruby generator.rb. By default, this command will not regenerate existing emoticons. Use the --regenerate flag if all emoticons need to be regenerated.

Important: If you plan to update this README, update the file src/README.md.eruby since the README will be generated from it

All game images and names are property of Valve Corporation.