back to tutorials

How to use phaser with vim

by [RameshLimbu] on 2017.12.2. 12.2.12.am [Updated: 2017.12.7 13.4.2.pm]

After getting so many request on how to use phaser js with vim (with auto-completion). I finally made this tutorial. Happy coding..

vim

vim is an awesome text editor. once you lay down your hands on it, you can't live without it.

phaser

Phaser is an HTML5 game framework which aims to help developers make powerful, cross-browser HTML5 games really quickly.

final conclusion :

Vim is awesome + Phaser is awesome too = double awesome !!!

lets get started...

install requirements

download and install:

  1. vim the awesome text editor

    for linux: use package manager.

    On Ubuntu and Debian, use apt-get to install:

    sudo apt-get install vim

    On Fedora and CentOS, install with dnf:

    sudo dnf install vim

    *tips install both the gvim and vim.

    - if you are a beginner use gvim and later user terminal vim. OR, choose anyone of them . Both has pros and cons.

  2. phaser the awesome game framework

  3. the nodejs

    for linux: https://nodejs.org/en/download/package-manager/

after installing requirements

  1. install package manager for vim

    eg: install vundle (most easy to use)

    tips: if you didn't find vimrc file (create new one in home directory)

  2. install auto-completion plugins

    choose anyone:

    1.Neocomplete

    2.YouCompleteMe

    optional plugins:

    1.nerd tree

    2.syntastic

    3.vim-airline

    4.ultisnips

    5.vim-snippets

  3. install phaser auto-completion

    METHOD 1 (with 'tern_for_vim' plugin)

    install 'tern_for_vim' plugin.

    after installing 'tern_for_vim'

    for linux:

    open the installed 'tern_for_vim' folder



    install tern inside this directory using npm

    now there is node_modules folder




    for windows:

    open the installed 'tern_for_vim' folder



    install tern inside this directory using npm

    now there is node_modules folder


  4. get phaser auto-completion

    (to download - right click the link below and save page to your destination folder)

    download phaser.js auto-complete api

    OR, download from https://github.com/boniatillo-com/PhaserSublimePackage

    Now,

    copy and paste the downloaded phaser.js(auto-completion) to the tern plugin folder.

    for linux:



    for windows:



    next step,

    now , at the root of your phaser project folder

    create and open .tern-project file(*note '.tern-project' is the extension) and copy-paste/write the following json code to it.

    {
    "ecmaVersion": 6,
    "libs": ["browser"],
    "loadEagerly": [],

    "plugins": {
    "phaser" : {},
    "doc_comment": true
    }
    }

    next, save and exit.

  5. install phaser auto-completion other way

    METHOD 2 (without 'tern_for_vim' plugin)

    install tern globally (from terminal/cmd prompt).

    npm install -g tern

    after that, copy the phaser auto completion to tern folder (this time from .npm > node-modules > tern > plugin ) or, follow point no. 4 (above).


  6. optional tips:: might come in handy for bug in auto-completion

    sometimes, phaser auto-completion list is not shown if the function is declared outside of the scope and you provoke 'this.game.sth/.' then,

    in your vimrc file add option for toggle on/off neocomplete/ youcompleteme. and switch back and forth as demand

    eg: after toggling off neocomplete/ youcompleteme.

    - use inbuilt vim omni-completion "Ctrl-X + Ctrl-O"


    to show the phaser auto-completion inside .html file

    note:: if you are coding all the javascript/ phaser inside the main .html file then::

    in vim type,

    :set ft=javascript

    -to switch back to html-format:

    :set ft=html


    for quick testing your phaser game in browser

    follow the instruction to install http-server


  7. Test phaser project in vim editor






back to tutorials

Rating:
1 2 3 4 5

Comments