HTML5 game framework for web and iOS

Overview

#LimeJS

##Getting started:

###Mac OS X and Linux users:

  • Requirements: Python 2.6+, Git
  • Clone the git repo (you have probably already done that): git clone git://github.com/digitalfruit/limejs.git
  • bin/lime.py --help
  • bin/lime.py init
  • bin/lime.py create helloworld

  • open ./helloworld/helloworld.html in the browser
  • study/tweak the source

###Windows users:

If you consider yourself advanced user and know how to use Git/Python you are probably better off reading through Mac/Linux guide and choosing your best alternative tools/methods yourself. If not then follow this step-by-step route.

  1. Download and install Git bash from http://git-scm.com/download/win (if not already installed). While installing select "Use Git Bash only" and Unix style line endings.

  2. Clone lime git repo or download zip package from https://github.com/digitalfruit/limejs/archive/master.zip

  3. Extract the contents to suitable place on your hard drive. Next examples will use c:\ as the base path.

  4. If you don't have python download and install it from http://www.python.org/download/. Python3 should work fine but 2.7.x is recommended.

  5. Launch Git Bash

  6. Check if you have python installed on your global path by running: python --version

    If this returned error you have to add it to your global path or use full path to binaries in next steps.

    To add python to your global path run:

    echo "export PATH=$PATH:/c/Python27/" >> ~/.bashrc

    This is the longer version if you use Command Prompt instead of Git bash:

    1. Open Control Panel -> System and Security -> System -> Advanced system settings
    2. Under Advanced tab select Environment Variables...
    3. Under system variables find variable named Path.
    4. Select it and click Edit.
    5. Append semicolon and path to the folder you installed python to the value. For example ";C:\Python27"
    6. Press OK and OK
    7. Restart Command Prompt
    8. Try if it works now
  7. Move to lime base folder cd c:\lime

  8. python bin/lime.py --help

  9. In similar pattern continue from Mac/Linux tutorial from step 3

##Browser support:

  • Current: Chrome, Safari 5, Firefox 3.6+, Opera, IE9, Mobile Safari
  • Soon: Android, Blackberry Playbook
  • Maybe: WebOS

##Links:

Closure Library: https://developers.google.com/closure/library/

Closure Compiler: https://developers.google.com/closure/compiler/

Closure Templates: https://developers.google.com/closure/templates/

Box2D: http://www.box2dflash.org/docs/2.0.2/reference/

Canvas 2D API spec: http://dev.w3.org/html5/2dcontext/

WebGL spec: http://www.khronos.org/registry/webgl/specs/latest/

Closure book: http://www.amazon.com/Closure-Definitive-Guide-Michael-Bolin/dp/1449381871/ http://books.google.com/books?id=p7uyWPcVGZsC&&pg=PP1

Closure video from Google I/O 2010: http://www.youtube.com/watch?v=yp_9q3tgDnQ

Known issues:

  • lime.py build problems when directories contain spaces
  • ...add your issues to the github page

Browser issues:

Missing/broken:

  • Custom WebGL context
  • Sprite fill
  • Web-app installing tutorial
  • Unit tests(partial)
  • Some basic fallback for non supported browsers

Future:

  • Strokes
  • More shapes
  • Box2D basic integration
  • Different shape masks
  • More transitions
  • Better audio support
  • Local cache support
  • Other mobile platforms support(Android,WebOS,Playbook)
  • Data support(endtable?)
  • Radial Gradients
  • Resources loading
  • Preloader
  • WebGL Renderer
  • Dev console
  • Tiles
  • Scrollers
  • Menus
  • UI controls
  • Video support
  • Markup with templates
  • Integration with MoRe
Comments
  • sometimes animations flash

    sometimes animations flash

    in Chrome, sometimes the animation will keep flashing, looks like it is trying to renew the animation images. But it is hard to debug, as it is sometimes normal,sometimes flash. If you run chrome in ipad and go to http://qyapp.cn/liyusheng/wolf_compiled, you will see the flashing.

    opened by yushli 13
  • Check up front if anything changed.

    Check up front if anything changed.

    This is faster than creating and comparing identical transform strings.

    Also if quality and rquality are 1, call a smaller version of the draw function to avoid unnecessary multiplications divisions of 1.

    Side note: Checking dirty would be better than checking size,quality,and scale. But Dirty wasn't 100% accurate, so it can't be used right now.

    opened by funinvegas 11
  • Problem with circles rendered in webkit canvas

    Problem with circles rendered in webkit canvas

    For quite a while I have been noticing that the borders of circles are rendered with a lot of imperfections when the canvas renderer is used in webkit based browsers: 1 Our games have a lot of circular elements, and the quality of them is quite noticeably degraded when rendered with canvas. And it is because of this that we have been avoiding using it.

    But I have now decided to investigate why this is happening and found that it is the clip method of the webkit implementation of canvas that is causing this. So I have made a small change to draw circles using the fill method and it corrected it for most fill types except images. 2 Those changes are available here: https://github.com/aurhe/limejs/commit/3cd8ccb5e54422667643a2dc0b3befe1f44ae13e but still lack proper testing, and I still have not found a way for drawing rounded images in canvas without using the clip method.

    So my question is: Should the drawing method be changed to this only for circles and roundrects? Or will we continue waiting for this to be corrected in webkit?

    I have been seeing this problem in webkit based browsers for a while and I personally wouldn't count that it will be fixed anytime soon.

    opened by aurhe 9
  • Multiplying duration by 1000 at set time saves multiplication calls at render time.

    Multiplying duration by 1000 at set time saves multiplication calls at render time.

    Note: I don't think I broke anything, but I don't know how and/or can't test all the transition code, and I had to touch it to keep the duration passed to it in increments of seconds, instead of ms.

    Animations will also now unschedule themselves if they lose all their targets, and reschedule themselves if they regain targets.

    Also removed some redundant and/or excess code.

    opened by funinvegas 9
  • click event is generated twice for buttons using the canvas renderer

    click event is generated twice for buttons using the canvas renderer

    When using a DOM renderer the element that generates the "mousedown" event is different from the element that generates the "mouseup" event because of the different button states (up/down). Therefore it is necessary to manually fire the "click" event. But if the used renderer is canvas, it's the same element for both button states and the "click" event ends up being fired twice.

    opened by aurhe 8
  • Thin white lines around sprites

    Thin white lines around sprites

    Hi LimeJS-Team,

    We have a problem regarding the use of sprites in lime.js. When we turn on the canvas renderer, there appear thin white lines around our .png files.

    https://github.com/Fannon/IA6.Medienprojekt/tree/master/client/obacht

    Kind regards, Martin

    obacht_screenshot_white_lines

    opened by ghost 8
  • Adding a function to be able to compare lime.fill.Color

    Adding a function to be able to compare lime.fill.Color

    Initially I was doing this

    var color1 = new lime.fill.Color([10, 10, 12]);
    var color2 = new lime.fill.Color([10, 10, 100);
    if (color1.str ==  color2.str) console.log('yay');
    

    but I occasionally I kept forgetting to compare the .str and was doing color1 === color2 which doesnt work.

    With this commit I can do the following which is a bit more explicit

    if (color1.equals(color2)) console.log('yay');
    
    opened by bulkan 8
  • CLOSES #73

    CLOSES #73

    Bug: In Inkognito-Mode it seems as if it is caching but the screen is just blank without showing the "Loading..."/"Initializing...", until it's done and starts the app. Unfortunately, I don't have the time to track it down, but this should be a quick fix, I suppose.

    opened by MaliusArth 8
  • Adding GameTime. Time since app start that pauses with director.

    Adding GameTime. Time since app start that pauses with director.

    getGameTime will return ms since app start, and won't increment when the app is paused. Useful for replacing goog.now() calls or Date.now() calls for time path, while preventing pause-cheats.

    Minor other fixes.

    opened by funinvegas 7
  • Chrome 21 bug or limejs bug? white line appears in the animation

    Chrome 21 bug or limejs bug? white line appears in the animation

    In chrome 20 the animation runs well, but in chrome 21 a very ugly white line (1 pixel wide) will appear when running MoveTo or ScaleTo animation. FadeTo does not have this problem.

    opened by zhanzhenzhen 7
  • Updated build process / templates

    Updated build process / templates

    I thought I would make it a bit easier to get up and running from the templates.
    Creating a project should now be relative to bin. Template structure updated to include: -bin, -lib, -src Added separate project_path file support Added multiple builds for quick start: -list, -script, -whitespace, -simple, -advanced Added support for closure --closure_compiler_flags

    Fixed collision of files on build due to overlapping --root folders

    opened by aaren-cordova 6
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • mousedown bug fixed(chrome)

    mousedown bug fixed(chrome)

    We are working on 2 major projects using limejs and strange bug is that many times project stops taking mouse events inside chrome browser. After checking code of limejs we found the bug inside class Node(node.js) , function "lime.Node.prototype.listen"

    Inside this function there is a check for touch devices and bypassing mouse events and here chrome returning wrong value, its returning true for non-touch devices as well(laptops)

    // Bypass all mouse events on touchscreen devices
        if (lime.userAgent.SUPPORTS_TOUCH &&
            type.substring(0, 5) == 'mouse') return null;
    

    lime.userAgent.SUPPORTS_TOUCH is defined in useragent.js. So we replaced this check and added manual checking for ios and android device.

    // Bypass all mouse events on touchscreen devices
        if ((lime.userAgent.IOS || lime.userAgent.ANDROID) &&
            type.substring(0, 5) == 'mouse') return null;
    
    

    You can add other device checks if you want. Finally all mouse events working inside chrome :)

    opened by sagestudios 0
  • unzipping error when im bin\lime.py init

    unzipping error when im bin\lime.py init

    Downloading Closure Compiler: 515% Unzipping... Traceback (most recent call last): File "C:\limejs\bin\lime.py", line 436, in main() File "C:\limejs\bin\lime.py", line 417, in main checkDependencies() File "C:\limejs\bin\lime.py", line 122, in checkDependencies zippedFile = zipfile.ZipFile(zip_path) File "C:\Python27\lib\zipfile.py", line 770, in init self._RealGetContents() File "C:\Python27\lib\zipfile.py", line 811, in _RealGetContents raise BadZipfile, "File is not a zip file" zipfile.BadZipfile: File is not a zip file

    opened by rwsodinz 2
  • UnicodeDecodeError

    UnicodeDecodeError

    --Development - Windows 10 / Python 3.4.3 / git version 2.5.0.windows.1 -- after cloning from github

    $ python bin/lime.py init Traceback (most recent call last): File "F:\Projects\limejs\closure\closure/bin/build/depswriter.py", line 202, in main() File "F:\Projects\limejs\closure\closure/bin/build/depswriter.py", line 178, in main path_to_source.update(_GetRelativePathToSourceDict(root, prefix=prefix)) File "F:\Projects\limejs\closure\closure/bin/build/depswriter.py", line 145, in _GetRelativePathToSourceDict path_to_source[prefixed_path] = source.Source(source.GetFileContents(path)) File "F:\Projects\limejs\closure\closure\bin\build\source.py", line 125, in GetFileContents return fileobj.read() File "F:\Python34\lib\encodings\cp1252.py", line 23, in decode return codecs.charmap_decode(input,self.errors,decoding_table)[0] UnicodeDecodeError: 'charmap' codec can't decode byte 0x90 in position 1180: character maps to Updating Closure deps file python F:\Projects\limejs\closure\closure/bin/build/depswriter.py --root_with_prefix="F:\Projects\limejs\closure/ ../../" --root_with_prefix="F:\Projects\limejs\lime/ ../../../lime/" --root_with_prefix="F:\Projects\limejs\box2d/src/ ../../../box2d/src/" --output_file="F:\Projects\limejs\closure\closure/goog/deps.js"

    opened by zulcomp 0
  • IOError: [Errno socket error] [Errno 65] No route to host

    IOError: [Errno socket error] [Errno 65] No route to host

    When i execute bin/lime.py init, i get this error bellow

    Downloading Closure Compiler: Traceback (most recent call last): File "bin/lime.py", line 436, in main() File "bin/lime.py", line 417, in main checkDependencies() File "bin/lime.py", line 120, in checkDependencies urlretrieve("http://closure-compiler.googlecode.com/files/compiler-20130411.zip",zip_path,rephook) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib.py", line 98, in urlretrieve return opener.retrieve(url, filename, reporthook, data) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib.py", line 245, in retrieve fp = self.open(url, data) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib.py", line 213, in open return getattr(self, name)(url) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib.py", line 350, in open_http h.endheaders(data) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/httplib.py", line 1049, in endheaders self._send_output(message_body) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/httplib.py", line 893, in _send_output self.send(msg) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/httplib.py", line 855, in send self.connect() File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/httplib.py", line 832, in -connect self.timeout, self.source_address) File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/socket.py", line 575, in create_connection raise err IOError: [Errno socket error] [Errno 65] No route to host

    opened by winterbang 1
Owner
Digital Fruit
Digital Fruit
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

Richard Davey 33.4k Jan 7, 2023
Atsumaru - an open source manga reader application for Android, IOS & Web

Atsumaru is currently in alpha pre-release We're still working on vital components for the reader, follow this repo for updates or join our Discord se

Undo 31 Dec 21, 2022
Kakapo for Desktop, Web, iOS, Android, Babel, Reflux, ImmutableJs, HowlerJs, Webpack

Kakapo is an open source ambient sound mixer for relaxation or productivity, available on the Chrome Web Store. See also: Kakapo for Desktop & Web - K

Dredsoft 3 Sep 15, 2022
2D HTML5 rendering and layout engine for game development

Stage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source. Check out examples and demos!

Ali Shakiba 2.2k Jan 3, 2023
Recreated Chromium T-Rex game in Phaser 3, written in HTML5 & TypeScript

Chromium Dino Game - Phaser 3 + TypeScript + Parcel Chromium Dino Game Clone using Phaser 3 + TypeScript + Parcel Play You can play online here Dino P

Mai Hoàng Anh Vũ 3 Jun 21, 2022
HTML5 Game Engine

Quintus Engine Quintus is an easy-to-learn, fun-to-use HTML5 game engine for mobile, desktop and beyond! The Quintus engine is an HTML5 game engine de

Pascal Rettig 1.4k Dec 21, 2022
A tracer based on frida for XPC messages in iOS and macOS.

XPC tracer A tracer based on frida for XPC messages in iOS and macOS. This project is a variant of xpcspy. In particular for my purpose I didn't devel

Lorenzo 12 Dec 31, 2022
Mamera is a stupidly silly app developed to test CapacitorJS. It can be found on the iOS App Store.

Mamera This repo is focused on mobile app development for iOS. Although you may be able to build to Android from this repo, this ReadMe was written fo

Jamel 7 Mar 30, 2022
Bitcoin thin client for iOS & Android. Built with React Native Google Colab

Run bluewallet-Google-Colab https://colab.research.google.com/drive/1OShIMVcFZ_khsUIBOIV1lzrqAGo1gfm_?usp=sharing Thin Bitcoin Wallet. Built with Reac

DE MINING 0 Feb 25, 2022
Enrich your browsing experience, whether it be on mobile (iOS) or your desktop (macOS)

steven's userscripts safari specific AutoScroll.user.js (middle mouse scroll click drag wheel) mobile keyboard.user.js (mobile virtual keyboard shortc

Steven G. 6 Dec 15, 2022
iOS 7 style switches for your checkboxes

Description Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simp

Alexander Petkov 2.1k Dec 31, 2022
CSS sprite to represent iOS shortcut icons

shortcut-icons A CSS sprite to represent iOS shortcut icons. Grab the stylesheet and the default (iOS 15) glyph set, and add a shortcut icon to your H

Antonio Bueno 18 Nov 14, 2022
Add animation to your HTML5 pages, items and on text, using this JS Framework

animate.js is a tiny JavaScript library that provides a convenient way to apply Animate.css powered CSS animations to DOM elements without writing any

Rohit Chouhan 9 Oct 25, 2022
ZUI is an HTML5 front UI framework.

文档语言:中文 | English 一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。 从官方网站了解更多: https://openzui.com/ 。 ?? 为移动端设计,基于 Flex 的 UI 框架: MZUI。 官方 QQ 群:2群:127535859,1

EasySoft 2.6k Dec 21, 2022
Framework for HTML5 Canvas oriented 2D video games

Canvas Engine http://canvasengine.net Description Framework to create video games in HTML5 Canvas Get Started Follow the steps below to start: Downloa

Samuel Ronce 378 Dec 2, 2022
Clinton Mbonu 20 Jun 30, 2022