Giter VIP home page Giter VIP logo

creature_webgl's Introduction

Creature WebGL Game Engine Runtimes

This repository contains the Creature Runtimes for Javascript and WebAssembly based Game Engine Frameworks.

The following frameworks are supported:

  • PixiJS

  • Phaser ( Both CE and 3 )

  • ThreeJS

  • BabylonJS

  • CocosCreator + Wechat Game Engine

For more information on how to use the runtimes, please head over to this site

The Ice Demon character sample Artwork is by: Katarzyna Zalecka [http://kasia88.deviantart.com], Attribution-ShareAlike 3.0 Unported

Download the samples and more here.

Alt text Live Babylon JS Demo is here.

Live Raptor Mark Demo

Raptor Mark is a demonstration of what the Creature WebGL plugin is capable of.

Alt text

Regular JS Demo

This demo shows 30 fully mesh deforming raptor characters running across the screen. This demo is using the CreaturePack Web format to deliver results that have high performance, great quality and yet compact in delivery size.

UtahRaptor Artwork: Emily Willoughby (http://emilywilloughby.com)

View the Live demo here .

WebAssembly Demo

Unleash the power of high performance Web Assembly with the new CreaturePack WebAssembly runtimes!

Alt text The above demo uses advanced Delta Compression in CreaturePack to deliver high performance + quality animation with extreme compression ratios! This Raptor animation is only 230KB in size!

View the Live CreaturePack BabylonJS WebAssembly demo here

This second demo shows 200 (Not a Typo!!) mesh deforming raptor dinosaurs running across the screen! The demo is using the CreaturePack Web format similar to the JS version to deliver results that have high performance, great quality and yet compact in delivery size. However, with the new Web Assembly backend, the playback is even faster, capable of handling huge numbers of characters running live on your web browser. Even on moderately equipped PCs, this demo runs at a fluid 60 FPS. Make sure your browser has been updated to the latest version to take advantage of this exciting runtime.

View the Live CreaturePack WebAsseambly demo here :)

Read the writeup on the WebAssembly runtime here

Share your animations easily with the CreaturePack WebAssembly Widget

Alt text

The CreaturePack WebAssembly Widget allows you to easily share your exported Creature animations on your own personal webpage! The rendering core uses the powerful BabylonJS 3D WebGL Engine. This allows for beautiful rendering effects, including high quality soft-shadows and real-time 3D lighting. Head over to the WebAssembly folder for more info here.

License

The Creature Runtimes operate under 2 License types depending on whether you own a Licensed copy of Creature or not.

  • People who own a licensed copy of Creature: You use the standard Creature License included with the runtime code. TLDR: You are free to publish/modify/sell your product with the Creature runtimes without needing to state you are using the runtimes/put the copyright notice in your code/app. If you already have been using the Creature runtimes as a licensed owner of Creature, nothing changes :)

  • Everyone else: The runtimes are released under the very permissive Apache License :)

Both Licenses allow for private use and do not require any disclosure of your source code.

FAQ

My character mesh in BabylonJS flickers/disappears

This is a BabylyJS renderer issue and has to do with the bounding box of the character. You can try setting mesh.alwaysSelectAsActiveMesh = true. Or refresh the mesh data and bounding box each frame. Please read the thread here

creature_webgl's People

Contributors

andrewjb123 avatar jstncno avatar kestrelm avatar softwareseniqa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

creature_webgl's Issues

TypeError: this.timeSamplesMap[lookupTime] is undefined

I'm using creature with Phaser 3 (pack version) and I get this:

TypeError: this.timeSamplesMap[lookupTime] is undefined

when the animation ends. Would setting the animation to loop fix this? How do I do that?

My animation code is:

start_animation(name, speed, fade_time)
{
if(this.creature_object.pack_renderer.activeAnimationName == name) return;

	this.creature_object.pack_renderer.blendToAnimation(name, fade_time);
	this.creature_object.speed = speed;

}

`

Clipping?

well,It’s looks great!
Does it support Clipping? This feature is very important for me

Phaser3 please

this is really good and worth to have a try.
is there any plan to integrate with Phaser3 which is actually better then Phaser2?
there should be a CreatureDisplayRenderer.js & CreaturePlugin.js.

Phasor causes issues, cloned repo

Hi,

I tried Phasor-Demo.html and got the following problems

GET http://localhost:8080/succ_data.bytes 404 (Not Found)
xhrLoad @ phaser.js:57692
loadFile @ phaser.js:57660
beginLoad @ phaser.js:57317
start @ phaser.js:57293
preUpdate @ phaser.js:18624
updateLogic @ phaser.js:26735
update @ phaser.js:26684
updateRAF @ phaser.js:46614
_onLoop @ phaser.js:46598
CreatureMeshBone.js:2994 Uncaught TypeError: Cannot read property 'pointsArray' of null
    at Creature.LoadFromDataFlat (CreatureMeshBone.js:2994)
    at new Creature (CreatureMeshBone.js:2762)
    at Object.create (Phasor-Demo.html:67)
    at Phaser.StateManager.loadComplete (phaser.js:18858)
    at Phaser.SignalBinding.execute (phaser.js:19555)
    at Phaser.Signal.dispatch (phaser.js:19378)
    at Phaser.Loader.nextFile (phaser.js:58096)
    at Phaser.Loader.fileComplete (phaser.js:57896)
    at XMLHttpRequest._xhr.onload (phaser.js:57685)
Creature.LoadFromDataFlat @ CreatureMeshBone.js:2994
Creature @ CreatureMeshBone.js:2762
create @ Phasor-Demo.html:67
loadComplete @ phaser.js:18858
execute @ phaser.js:19555
dispatch @ phaser.js:19378
nextFile @ phaser.js:58096
fileComplete @ phaser.js:57896
_xhr.onload @ phaser.js:57685
debug3Export_character_img.png:1 GET http://localhost:8080/debug3Export_character_img.png 404 (Not Found)

Phasor-Pack-Demo.html does work, what is the difference.

Doesn't work for Phaser 3.5

Is there a chance for this library to get updated for Phaser 3.5? Phaser 3.5 has different API with Phaser < 3.5. I tried to do that but didn't succeed.

[Improvement] Typescript definition types + NPM

Description

Few ideas for improvement:

1/ This could be nice to add typescript typings to the repo.
This would make autocompletion and typescript usage of these runtimes more user friendly.

2/ Publishing these runtimes on NPM could helps.
It would be easier to manage as a user, and get future update without have to manually check this repository.

3/ A LICENSE.md file: It took me times to realize the license was directly embedded in each js file. Github doc

Do you have any direction to use "setTintFill" to creature object in phaser 3

I want to change the color programmatically to game object .
default function name is "setFillTint" (phaser3.24)
.
or any other way to change color of creature object? (just replace color to it)

do you have any suggestion the way to edit/add new function to doing this? (this function is very important to me, I have to make it success no matter what T_T)

Applying phaser physics to creature object

Is it possible to apply physics to a phaser object?
For example, how do you define parameters like velocity.
As far as I know, Phaser docs only have information regarding sprite objects.

Creature for EaselJS

Hi all!

I'm starting with HTML5 integrations. Specifically, I started with EaselJS. I have chosen this engine because it is very easy to import elements from Adobe Flash.
My question is whether you intend to export to this graphics engine. I tried to read the Phaser and Trree exporters, but I understand all the proccess to make my own runtime.

Best regards!

BabylonJS rendering issue

Description

Hello there,

I'm using the babylon.js runtime since few days and I've encountered 2 issues, and I was able to reproduce them with the sample provided on the website.

First one, texture overlapping:

screen shot 2018-09-05 at 11 41 56 am

As we can see, the blue flame is sometime visible through the body. After few research, I realized it was caused by a setting on the camera
camera.minZ = 0.0001;

I managed to workaround this issue by not using this property.

Second one, visibility issue:

With the default sample, its possible to move the camera around the creature without any problem.
So I decided to use the same to move the creature around my 3d environment

new_creature_renderer.renderMesh.position = new Vector3(11, 0.5, -11);
new_creature_renderer.renderMesh.scaling = new Vector3(0.05, 0.05, 0.05);

But with this, the creature start to blink or disappear based on the camera position (kinda looks like some culling)
Demo, the creature blink after the camera was moved

Is there any other way to move the creature in the scene? or a setting to solve this?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.