Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Sprite and Special FX (Pixi / Phaser)

by eddy Sun Apr 13, 2014 11:03 pm

Updated
  • this is experiment using Pixi 2.2.8 using: tap/click event, deformation FX, blend modes
  • I wrapped some pixi functions
  • YQL web service is used to download cross-domain images data URI

Image
Image
Code: Select all
; ************************
; PIXI Procedures
; ************************

Procedure.i CreateView(Width,Height,IsFullscreen=#True)
  !var renderer = PIXI.autoDetectRenderer(v_Width, v_Height);
  !renderer.view.style.position = "absolute"
  !renderer.view.style.width = v_IsFullscreen ? "100%" : v_Width + "px";
  !renderer.view.style.height = v_IsFullscreen ? "100%" : v_Height + "px";
  !renderer.view.style.display = "block"; 
  !document.body.appendChild(renderer.view);
 
  !return renderer;
EndProcedure

Procedure.i CreateStage(ColorRGB)
  !return new PIXI.Stage(v_ColorRGB);
EndProcedure

Procedure RenderView(View, Stage, *animationFunction)
  !v_View.render(v_Stage);
  !requestAnimFrame(p_animationFunction);
EndProcedure

Procedure.i LoadTexture(ImageSrc)
  !if (v_ImageSrc.indexOf(';') == -1){
  ;   load PIXI texture from image URL
  !   var v_newTexture = PIXI.Texture.fromImage(v_ImageSrc);
  !} else  {
  ;   load PIXI texture from HTML img tag
  !   var image = new Image();
  !   image.src = v_ImageSrc; 
  !   var basetexture = new PIXI.BaseTexture(image);
  !   var v_newTexture = new PIXI.Texture(basetexture);   
  !} 
  ProcedureReturn newTexture
EndProcedure

Procedure ScaleEntity(Entity, ScaleX.f=1, ScaleY.f=1)
  !v_Entity.scale.x=v_ScaleX;
  !v_Entity.scale.y=v_ScaleY;   
EndProcedure

Procedure FilterEntity(Entity, Filter)
  !v_Entity.filters = [v_Filter]; 
EndProcedure

Procedure SetEntityColor(Entity, ColorRGB=$FFFFF)
  !v_Entity.tint = v_ColorRGB; 
EndProcedure

Procedure SetEntityBlendMode(Entity, BlendingMode$="NORMAL") ;NORMAL, ADD, MULTIPLY, SCREEN
  !v_Entity.blendMode  = PIXI.blendModes[v_BlendingMode$]; 
EndProcedure

Procedure SetEntityOpacity(Entity, Opacity.f=1)
  !v_Entity.alpha = v_Opacity; 
EndProcedure

Procedure SetEntityClick(Entity, *ClickFunction)
  !v_Entity.interactive=true;
  !v_Entity.click = p_ClickFunction; 
EndProcedure

Procedure.f GetEntityX(Entity)
  !return v_Entity.position.x; 
EndProcedure

Procedure.f GetEntityY(Entity)
  !return v_Entity.position.y; 
EndProcedure

Procedure.i AddEntity(Entity, Parent, x.f=0, y.f=0)
  !v_Entity.position.x = v_x;
  !v_Entity.position.y = v_y; 
  !v_Parent.addChild(v_Entity); 
EndProcedure

Procedure.i AddGroup(Parent, x.f=0, y.f=0)
  Protected newEntity
  !v_newEntity = new PIXI.DisplayObjectContainer();
  AddEntity(newEntity, Parent, x, y)
  ProcedureReturn newEntity
EndProcedure

Procedure.i AddSprite(Texture, Parent, x.f=0, y.f=0)
  Protected newEntity
  !v_newEntity = new PIXI.Sprite(v_Texture);
  AddEntity(newEntity, Parent, x, y)
  ProcedureReturn newEntity
EndProcedure

Procedure.i CreateDisplacementFilter(Texture, ScaleX.f=1, ScaleY.f=1) 
  Protected newEntity
  !v_newEntity = new PIXI.DisplacementFilter(v_Texture);
  ScaleEntity(newEntity,ScaleX,ScaleY)
  ProcedureReturn newEntity
EndProcedure


;{ plugins loader
Macro InitPlugins(IsInitialized=#True) ; internal functions
  CompilerIf IsInitialized
    !"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
  CompilerElse
    !window.SpiderPlugins={extensions:{},paths:{},names:[]};
  CompilerEndIf   
EndMacro

Procedure DeclarePluginResource(Resource.s)
  InitPlugins()
  !,window.SpiderPlugins.names.push(v_Resource)
EndProcedure

Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
  InitPlugins()
  !,window.SpiderPlugins.paths[v_Plugin]=v_Path
  !,v_IsUsed && window.SpiderPlugins.names.push(v_Plugin);
EndProcedure

Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False) 
  !var cfg=$.extend({ enforceDefine: v_EnforceDefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
  !requirejs.config(cfg);
  !require(window.SpiderPlugins.names, p_FunctionUsingPlugins); 
  InitPlugins(#False)
EndProcedure
;}

;{ yahoo web service
Procedure.i ConvertYahooJSONToDataURI(YahooJSON)
  !return v_YahooJSON.query.results.url;
EndProcedure

Procedure.s QueryYahooURL(Query.s, FormatJSON=#True, YahooQueryURL.s="https://query.yahooapis.com/v1/public/yql?diagnostics=false&callback=&q=")
  Protected url.s=YahooQueryURL+URLEncoder(Query)
  If FormatJSON   
    url+"&format=json";Results will be formatted in JSON
  Else     
    url+"&format=xml" ;Results will be formatted in XML
  EndIf   
  ProcedureReturn url
EndProcedure
;}

; ************************
; EXAMPLE - Sprite And FX
; ************************

Global View,Stage,DisplaceFilter

Procedure AnimateView()
  If DisplaceFilter
    !v_DisplaceFilter.offset.x+=1;
    !v_DisplaceFilter.offset.y+=1;       
  EndIf
 
  RenderView(View, Stage, @AnimateView())
EndProcedure

Procedure ClickCarrot(EventData)
  Protected Entity
  !v_Entity = v_EventData.target
  SetEntityColor(Entity, $00FF00)
  SetEntityBlendMode(Entity,"SCREEN")
EndProcedure

Procedure CreatePIXIView(pixi, carrotJSON, grayscaleJSON)
  !PIXI=v_pixi;
 
  View=CreateView(1280,800) 
  Stage=CreateStage(RGB(0,0,0))
 
  Protected carrotTexture=LoadTexture(ConvertYahooJSONToDataURI(carrotJSON))
  Protected grayscaleTexture=LoadTexture(ConvertYahooJSONToDataURI(grayscaleJSON))
  DisplaceFilter=CreateDisplacementFilter(grayscaleTexture,5,5)
 
  Protected carrot,group
  group=AddGroup(Stage,0,0)   
  FilterEntity(group,DisplaceFilter)
  For i=0 To 40
    carrot=AddSprite(carrotTexture, group, Random(1280), Random(800))
    SetEntityClick(carrot,@ClickCarrot())  ;on click event
   
    carrotScale.f=0.25+(1-Abs(400-GetEntityY(carrot))/400)
    ScaleEntity(carrot,carrotScale,carrotScale)
   
    carrotOpacity.f=0.25+(1-Abs(400-GetEntityY(carrot))/400)
    If carrotOpacity>1 : carrotOpacity=1 : EndIf
    SetEntityOpacity(carrot,carrotOpacity)   
  Next   
   
  RenderView(View, Stage, @AnimateView())
EndProcedure

;urls to download cross-domain image data URI via YQL service
carrotURL$=QueryYahooURL("select * from data.uri where url='http://png-1.findicons.com/files/icons/1274/arcade_daze/128/carrot_bonus.png'")
grayscaleURL$=QueryYahooURL("select * from data.uri where url='http://i442.photobucket.com/albums/qq144/nheil29/my%203d-contemporary/grndbmp.jpg'")
DeclarePlugin("pixi","//cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.8/pixi")                       ;PIXI plugin To create sprite
DeclarePlugin("text","//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text",#False)          ;JSON plugin prerequisites
DeclarePlugin("json","//cdnjs.cloudflare.com/ajax/libs/requirejs-plugins/1.0.3/json",#False)      ;JSON plugin
DeclarePluginResource("json!"+carrotURL$+"!bust")                                                 ;Import json (append: !bust => using cache)
DeclarePluginResource("json!"+grayscaleURL$+"!bust")                                              ;Import json (append: !bust => using cache)
UsePlugins(@CreatePIXIView())
Last edited by eddy on Mon Apr 06, 2015 10:53 pm, edited 9 times in total.
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Sprite and Special FX (Pixi)

by eddy Fri Apr 18, 2014 11:06 pm

using Phaser

Code: Select all
Declare LoadScript(Script$, *OnLoadFunction)
Declare InitScripts()
Declare CreateScreen(Width,Height,Title.s,*PreloadFunction=0,*StartFunction=0,*UpdateFunction=0,*RenderFunction=0)
Declare PreloadGame()
Declare CreateGame()
Declare UpdateGame()
Declare RenderGame()

;  ************************************
;- JQUERY wrapper
;  ************************************

Procedure LoadScript(Script$, *OnLoadFunction)
  !$.getScript(v_Script$,p_OnLoadFunction);
EndProcedure

;  ************************************
;- PHASER wrapper
;  ************************************

Procedure.i CreateScreen(Width,Height,Title.s,*PreloadFunction=0,*StartFunction=0,*UpdateFunction=0,*RenderFunction=0)
  !window.game = new Phaser.Game(
  !   v_Width, v_Height, Phaser.AUTO, v_Title, {
  !   preload: p_PreloadFunction, create: p_StartFunction, update: p_UpdateFunction, render: p_RenderFunction
  !});   
  !return game;
EndProcedure

Procedure SetScreenBackColor(BackColor)
  !game.stage.backgroundColor = v_BackColor; 
EndProcedure


Procedure.i LoadImageSheet(ImageName.s,ImageUrl.s, FrameWidth=0, FrameHeight=0, FrameCount=-1)
  If FrameWidth=0 Or FrameHeight=0
    !return game.load.image(v_ImageName, v_ImageUrl);
  Else
    !v_FrameCount=v_FrameCount==-1?undefined:v_FrameCount;
    !return game.load.spritesheet(v_ImageName, v_ImageUrl, v_FrameWidth, v_FrameHeight, v_FrameCount);
  EndIf   
EndProcedure

;----- Tilemap

Procedure.i CreateTileMap(ImageName.s)
  !var newMap = game.add.tilemap();
  !newMap.addTilesetImage(v_ImageName);
  !return newMap;
EndProcedure

Procedure.i CreateTileLayer(LayerName.s, TileMap, Width, Height, TileWidth, TileHeight, ScrollFactorX.f=1, ScrollFactorY.f=1)
  !var newLayer = v_TileMap.width ?
  ! v_TileMap.createBlankLayer(v_LayerName, v_Width, v_Height, v_TileWidth, v_TileHeight):
  ! v_TileMap.create(v_LayerName, v_Width, v_Height, v_TileWidth, v_TileHeight);
  !newLayer.scrollFactorX = v_ScrollFactorX;
  !newLayer.scrollFactorY = v_ScrollFactorY;
  !return newLayer;
EndProcedure

Procedure UpdateTileLayer(Layer, TileNumber, x, y)
  !v_Layer.map.putTile(v_TileNumber, v_x, v_y, v_Layer);
EndProcedure

Procedure TileLayerWidth(Layer)
  !return v_Layer.width
EndProcedure

Procedure TileLayerHeight(Layer)
  !return v_Layer.height
EndProcedure

;----- Filter

Procedure.i CreateDisplacementFilter(ImageFile.s, ScaleX.f=30, ScaleY.f=30, OffsetX.f=0, OffsetY.f=30)
  !var newTex = PIXI.Texture.fromImage(v_ImageFile);
  !var newFilter = new PIXI.DisplacementFilter(newTex);
  !newFilter.scale.x=v_ScaleX;
  !newFilter.scale.y=v_ScaleY;
  !newFilter.offset.x=v_OffsetX;
  !newFilter.offset.y=v_OffsetY;
  !return newFilter;
EndProcedure

;----- Entity

Procedure SetEntityAlpha(Entity, Alpha.f=1.0)
  !v_Entity.alpha=v_Alpha;
EndProcedure

Procedure SetEntityFilters(Entity, Filter1=0, Filter2=0, Filter3=0, Filter4=0)
  !var newFilters=[];
  If Filter1
    !newFilters.push(v_Filter1)
  EndIf
  If Filter2
    !newFilters.push(v_Filter2)
  EndIf
  If Filter3
    !newFilters.push(v_Filter3)
  EndIf
  !v_Entity.filters=newFilters;
EndProcedure

Procedure.i RandomInteger(Min,Max)
  !return game.rnd.integerInRange(v_Min,v_Max)
EndProcedure

;  ************************************
;- EXAMPLE
;  ************************************

Procedure ScriptLoaded()
  Static Steps=0
  Select Steps
    Case 0
      LoadScript("https://raw.githubusercontent.com/photonstorm/phaser/master/build/phaser.min.js",@ScriptLoaded())
    Case 1
      LoadScript("https://raw.githubusercontent.com/photonstorm/phaser/master/src/pixi/filters/AbstractFilter.js",@ScriptLoaded())
    Case 2
      LoadScript("https://raw.githubusercontent.com/photonstorm/phaser/master/src/pixi/filters/DisplacementFilter.js",@ScriptLoaded())
    Case 3
      CreateScreen(800, 600,"phaser-example",@PreloadGame(),@CreateGame(),@UpdateGame(),@RenderGame())
  EndSelect 
  Steps+1 
EndProcedure

Global DisplaceFilter
Global TileMap,TileLayer1,TileLayer2
Procedure PreloadGame() 
  DiamondSpriteSheet=LoadImageSheet("diamond_5x1",
                                  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABACAYAAABr564eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADBBJREFUeNrsnW2MFeUZhud0F7euJEIXUGNOP+LiphVaGy3U7ZeSkkCzxpZSNpZEE9M0TUOs/sE/NiHRP21o2hrSYJuY2HTbYKEf6VZpMVtEiwVCRHal2Y8GdcHguouocBDY7Wk6M/e073PmOe+8c77mcO7rzzBn3jkz77I758r9zDMnVywWPUIIaUU+wB8BIYQXQEII4QWQEEJ4ASSEEF4ACSGEF0BCCOEFkBBCeAEkhBBeAAkhhBdAQgjhBZAQQngBJIQQXgAJIYQXQEII4QWQEEIaR3u133B0wUf9Bwx2z7vSX2/76ueN7XN/eMFYl9slGD9x6by/7Dnzai7LP9DRR3L+/LuuD9Y7l95ibC+MHzbW5XYJxs+cDNZ7vl/M9PxXDS7w53/Nsg5//dMLP2tsf+ntfxjrcrsE498cueAvh/rOZHr+L3ZN+vPPfzDvr1+xytx+cchcl9slGD/5/qS/vG0mn+n59zw14c9/+Uc+5K8vC5dg5LXTxrrcLsH44XA5uqG7qvOnARJCWpZc2idCw/RAZHzbHgvMbb350da20/zoU7c/+1SsKUpghNEnT53NEKYHYHyL1n47OP8lPzPnN/Vdc/7K9sLE4VhTlMAIo/nX2QxhegDGd2/+e/5ytfeQMX6P9wNjXdt+9OyBWFOUwAhBvc0QpgdgfJ2PButX3zNnjH/nl23GurZ9dijeFCUwQlBvM4TpARhf/8pguW7OnN/v2sz5a9tfORVvipJhsT2tGdIACSE0wLTGFxlMnczPZoTjlwr+su/cVFU/ETXjA/UyP5sRYtm7vbpGqBkfqJf52YxwZjz4PXj5wQtVnb9mfKBe5mczwtfPB8v+Qm9V568ZH6iX+dmMcGYqWE5vWpFo/jRAQggNUGNu8cf9AajWllRxG2x+tTbB6ScC80O1Vhpao82v1iZ496vX+PNHtVYaWqPNr9YmeOJ6z58/qrXS0BptfrU2wfUHTvvzR7VWGlqjza9SE6QBEkJogKr5hYYnTS1r5he9f2iqo7/dU5EJwvxgeNLUsmZ+kZGEpjq593BFJgjzg+FJU8ua+QGY6u7nn6vIBGF+MDxpalkzPwBT/dfTlZkgzA+GJ00ta+YHYKq/2TeRyARpgIQQGqBqfiA0togvbzAMLyvmJxn89R/95URogg9cPJtzMT8AY4tMq/sWw/CyYn6SIwOhCZ4I1u8cLG+C0vwAjA18cv5Kw/CyYn6SgSd2+8v3jwcmMvrYbM7F/MCsMLX2VabhZcX8JH/btd9fvhaa4OZif87F/ACMDdx0rWl4WTE/ybadB4Pf/+ngeMUta3I0QEII+X8DxH1+PY//orz5aQgjbLT5AZkFaiaI+/x6vlXe/FQDE0bYaPMDMgvUTBD3+W1eu7ms+WlII2y0+QGZBWomiPv8erbmy5qfhjTCRpsfkFmgZoK4z+/RDd1lzU9DGmGjzQ/ILFCaIA2QENKyRE+DkZ0dSU1PGl6bYoyu5id7feV5Rvf7hRnf0nmdwSfZN1Yb47GOcRqysyOp6UnD8yZWxu7nan6y1"+
                                  "1eeJ7aPHTxsvJ6/3TRCrM8MlD++7OxIanrS8I5662L3czU/2esrzxPbB8aDjK9rafB7seYLXzLGYx3jNGRnR1LTk4Y3M9QWu5+r+cleX3me0f1+u4Llh68MXr/hK+Y8sI5xGsstJqWZnjS8V7z4+bua37AyHueJ7XsPBYbXtSR4/e4vmgaLdWSBEhogIYQGWAJMzjXbOzUS/37bvbL7D1oMTRpdd3g8ZHvRUjFCrCMDtAGjk8aHhEPL9hbeOxv7fh29Yv5i/yMDyQzxf4Ynsj0sB+KNMDLHE8l+MWB0rtner/JvxL/hfK/s/qjW2oDRvbQsOB6yPSw1I8T6yeNnEx0HRuea7V33+lyi95f7o1prA0aXHwrN7ryZ8WlGiHVkgDZgdCXZXrjQsr0dt14d/4aLzdfl/pqhSZYJw9s7ZXZ+4H2kEWIdGSANkBBCA8Q/kKl1b7o/MBRbp0fKqi72nxPH6Qu3JzXBqPqrjJdGCPPbeemcv3xAjI8yt2d+7i9snR5pq7rYf1oc5+aNnpMJRtXfg/HjpRHC/P4yOs9f3inGI1N70vupv7R1eqSt6mL/JyfN43j3eU4miOrvMS9+vDRCVH/fOxRvaMjU8g8ne65f2qou9i887BnHucPrdTLBqPq7K367NEKY3y4vOOHNXr8xftixxzdtVRf77zhgdpRsWr/CzQTDLHDvofjt0ggj89vxo2C5ZQ0NkBBCAwyysvCJytH9gMgAlWqvZn6R4SnmCPOLvuMDA8Ks0dUE13Z2BeJWmIndLs3vhWJ8JwSeqIz7ATtDw+tY4mZ+GKeZI8wPhrYIRhdmja4meGPwwemNKR+c0vy2jV+MnT+eqIz7AY8uDAxv9Xw388M4zRxhflGVNyxaImt0NcFPfG1BYIK/PxO7XZrfGy/G///jicq4H/CGMGPz7nEzP4zTzBHmB+PsCX8AyBpdTfBzC4Pxf387frw0vwPFx2Pnjycq435AGNa6xW7mh3GaOcL8hkVPMbJGVxO8/TPdoQlOxP/+C/Mr/nMPO0EIIeS/qE+DiUwwrKI6d3CE1WDN/CLzkp0nQFSHYXpa5wfODyaY1Pw0YIKoorpmfagGa+YXzV90ngBZHYbpaZ0fOD+YYFLz04AJRlVXx6wP1WDV/EJk5wmQ1WGYntb5gfODCSY1P43IBMMqqmvWh2qwZn7R///W+PsPZXUYpqd1fuD8YIJJzU8DJogqqmvWh2qwZn5Adp4AWR2G6WmdHyPivkCb+dEACSEtj3ofoMwEJbbOEZv5WRGZoGag6PV9pjBtvJ7W/KL5i0xQYuscsZmfDZkJagaKXt8x0bKb1vyAzAQlts4Rm/nZkJmgZqDo9T35V/P+vrTmB2QmKLF1jtjMz/qHKTJBzUDR6/v8aTMDTGt+0d+VyAQlts4Rm/nZkJmgZqDo9R07JjJAi/nRAAkhLY/zt8LJTDBpz65qWloGKIBJApn1Vcv81PkrmWDSnl11/koGKIFJApn1Vcv8NLRMMGnProaWAUpgkkBmfdUyPw0tE0zas6v+/29N1oMMkwQy66uW+annqWSCSXt2NbQMUAKTBCVZn6P50QAJITTApAaomWCJqYlqrI2nC285Hf/GeVfFvl4r87OZYMkntajG2jhyqN3p+Pnr4nuNa2V+NhOUyGqsjXf2z"+
                                  "TodvyMfP71amZ/NBCWyGmtj8Pw+p+Mv9z4W+3qtzM9mghJZjbUx89yf3U7gptsURXQzPxogIYQG6GqA0SfXVUv8Hfu+eVdFJpjUABttfpL93wlM8OaNlZlgUgNstPlJPvXjDn/+G+9bU5EJJjXARptfiXB07vfnf8fXeysywaQG2GjzkyzadtCfP6q0aU0wsQFW2fxogIQQGmBaA0xqgraeXpsBZs38XE3Q1tNrM8CsmZ+rCdp6em0GmDXzczVBW0+vzQCzZn6uJmjr6bUaYI3MjwZICGl52it9g75zU7lyJmh7WosrWTE/0Ls9OA/NBG1Pa3ElK+YHXn7wQq6cCdqe1uJKVswP9Bd6c+VM0Pa0FleyYn5getOKXDkTtD2txV25q2N+NEBCSMtTcQZYkmkoJqhlgVoGKLO/rJmfhmaCWhaoZYAy+8ua+WloJqhlgVoGKLO/rJmfKiiKCWpZoJYByuwva+anoZmglgWqGaDM/qpsfjRAQkjL017tN9QywbRZYLOYH9AywbRZYLOYH9AywbRZYLOYH9AywbRZYLOYH9AywdRZYI3MjwZICKEB1uqN1eqw5b5AZH/NZn5JTVD7FjeA7K/ZzC+pCWrf4gaQ/TWb+SU1Qe1b3ACyv2Yzv6QmqH2LWwSyvxqbHw2QENLyVL0KrAETlFmgrAIfDZfNan4aMEGZBcoq8LF3c01tfhowQZkFyirwxVP/bmrz04AJyixQVoHHvONNbX4aMEGZBZZUgUf218X8aICEEBpgvQxQmiCAAV6u5qeZIIABXq7mp5kggAFeruanmWD09xAa4OVqfpoJgsgA62x+NEBCCA2w3gYIfnLFfP/AzV7tTcuf+gITbPZqb1p67m/359/s1d60/DC3w59/s1d7U194tuwOLjx1qvbSAAkhRPAfAQYAvFcBUPm+KwgAAAAASUVORK5CYII=",
                                  64,64)   
  GroundTileSet=LoadImageSheet("ground_24x1",
                             "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAAgCAIAAABl+ouiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACFdJREFUeNrsnb9vHEUUx/csO7biOMZKDiXOJUYyFGlIKEAukIxEkICCAoEokpICF6n5D/gXaNJQRpEokDAFFKSzSBFAkdIkEoeNExFL5mxicY4Uc7Nv7/zs3Zl782tvz/l+istlb+ft7Jvdp/0+z7ytfXX9epIkl862O5/jk9NJONpPW53P3x6ND8Q+/epzxMH2P559yfa3Xp3o2fnlwX8GD9v2X97Kxz+StlUeX2r7ZKPW+ayf3gvef2q79udI57Nx4bmnfV1vtx6rK+fJ5jO1fWas83nyzITDGJn9IPH/7NhuEof1Z8dg38G+fLu5h279l7fy8Y+kbZXHN3b/w9q3vdLKOceRBAAAAAAABGWUnst4DiMUZHN2bGuA9n2OWIX+6yBNn4dUvtm+ZHv7aZttKb5C3Povb+XjH0nbKo9vlqfZiNX/bh5oO4h9XW+fbCr9dn7px87n6tfvqV+n2g5jZPZDv3NUWbTp4+pMWztTAceXbK63Tr2A9knT5+EqX2dfsl3SQ7f+y1v5+If2T9h55dtWeXzL6f+pZyq3nYyFGal8b+kqvfz5cufz1xsfCq/PsD5EBgsAAAAAIHQGCy6wpb09nhycWcJ1eWz4fJR/zrzS2/7S4z8O/fpi+ids/sn63AX5FUn2MTZrTZUTWln4QZ3p7x+kR/e1eft1Ze1q67ND22/dVVfCguUVnpHmrrJ8SdrnJKkZ2g72yi+T2HN3zNCcOV38gX/8ybIylkjyK5LsYzmsLKjc0mIaf/yh+PPRg7cL489rlldO9p3lU++z7zryPkQGCwAAAAAgMEc8g2W75kiksNPcDJ9Z0pgq+7y4djywZaMZ6Yj5VZldj9Uq6B//a4avX5PA17jpriXb7KMuJ+RPY+5k53NhRc1LqKerCP3JlOgcO0pq+ZP199V/BEfR+WdOcHSdD0lTHjt+QmUFku2APiSbszsm+7TdzO7Ov33tT9XPqS1s7eflpeX9+8tpBMcnz6X2tw7Zl4yROf5074Vi+5LteQvkjUb9JIs/ew7+kZ+1m39421bT1Fbvh+ne2dnGH/JPW+Nn6o85+8g9/930zV78kfdfHmPN8cd2pCj+TKWRjfasJ+pML1H8Ods22M/u052k0D+JZfyh7CPZRAYLAAAAAGA4M1huVan81wDSXBPz3+MluYcD6j994t77/l2hdow3J+nl82/2vv+9eifS2JF/Mi21scV+qVXc"+"Pz7Iay/xXFdjsr9lefYxnxOyhVe6KrqzRgz7mO/f3Xe+VSrt548TfS7TDVvtaPYhh3RwqPiTX+HoGn9OJPpVugfvOMQfxB/En/Dxh99r/vGHcldkExksAAAAAIDARM9gZXPyN3YL1ZhZtfhUJ6JWjTlloZFtm3B49qf+N3y0SNA5SZmeu6eelO/cfdTbTvo47Coqrht0/qE673VxhjKvNqo8Z0tyBeoyDW7qn1+NNAcrm8NkqRoJ7lWu7yX75PX07dmbPV17O12bs8hW9pW/gk+SQUH8QfxB/EH8GVT8QQYLAAAAACAw0TNYXNnIFYb"+
                             "8L8oyveL+7N+dOTHh2RPbakASHUmrJGLTp343UxgyFVUr1OVh/VNNdOq/e6Xtq0ZSaYtJOgdCoMz4uwVJEZI/V+6mP6f1Zj59Y6ynFPP7kOepMg2t7pm/eLjn2XrGdE4G/y6/40JBa3b+utcs9DDiD+IP4g/iTxXiDzJYAAAAAACBKWkVoe276mz/olxl3KoBSbRIRJUjqb+SjhHpHtsMQTYnxluXD6+OzKt/8nm+rnE2/4Apy/zo8/HKtHiqArkiXF1JCvfh8C18BVxjcsJBHUrWB+ng8xs4NNfB9o0FiD+IP4g/iD/lxx9ksAAAAAAAAnNEKrn71dlyr58RtoaKrpI1J947ByVrdgpUQnPLM0MgUdi248tHVtc2bPUmn+uT+003+leef6FG//T+6PMx6ip4VcV4nmYnpDMY6Hv7QuuQnrvK9ulDtk5HqvVt1wcVZC80c0SIGKvVEH8QfxB/EH9ixB9ksAAAAAAAAjP0GSy3OjddfHVYjBoq5kqy5bxzUEKf+sKBtLXr+NYEbWtCb0gqKZut5Vc58TkNvK3b6JsVfLf/2y5aX7OFV1ImHt5X9vmsC5ppkV9DNH9xqq+OpDkivB66fJ5NmRkCxB/EH8QfxB/duCCDBQAAAAAQmKHPYNnWufFXTnkkNVRizFoIpRf18wPcsdXWOv/4jK+ugjY/R916Jf0b0FzyEPn+k3ZspO9+N/fEH1Jg55d+Ut+/uZL2x1LBpxa46qVKygupahw/vtfzA18HxL/fSpZ798ha02WNnk2tI2mGAPEH8QfxB/EnXvxBBgsAAAAAIDBHZBWhz1vDyoFrBQnmOhz+6OYH+L+FzVZbS/wTY3x1FY/cVjOZlXe+/6ThdPuHHX3y7UM2/0DuSa7gCyopX5T2YT63v61udpsDEU+XI/4g/iD+IP6YxwIZLAAAAACAwIzCBV66UFwlWfLMXmYdoPzcgrBvYbOtH1019V9+f+KNPs05WFlQMxjGs1rMLmq7HAUfqg9HryY74g/iD+LPcMUfZLAAAAAAAAIzyp+XfVbB6J/Ba1b25a3c7Mfuv799Um8NbbsJT/t8Oz+j/BO9vP4KxjeUffnoy+3XE/Urrampp2o+7EjF849PH3B9Iv5gfBF/Bht/kMECAAAAAAjMKK3moLqlMf7u62/f3Kr6/a+y/aIj1qx6gvEdRvtljm9Y+7Z9wPWJ+IPxRfwZVPxBBgsAAAAAIDC1L69d6/wzPTOTdNcI0DMdfXd7HuR2WpubDvZ1+wyL/dj+GXb78D/sy+3Lj4j4g+sH/of96sQfZLAAAAAAAALzvwADAHnI3o0Q581fAAAAAElFTkSuQmCC");   
  DisplaceFilter=CreateDisplacementFilter("data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAALCACAAIABAREA/8QAFwABAQEBAAAAAAAAAAAAAAAACAcGCv/EAD0QAAADAgoFCgUFAQEAAAAAAAABBhGBAgMEITFEcbHBwjM0QVFyBRMUIzJDYZGh8BIiJDXRB1KC4fGy0v/aAAgBAQAAPwDqvW9EosK4DBf1h2YB9f1h2YGaVyOIKXyeP5mLMpKwpMc5N8KfEyZQLGioszjYhsxGbWTsZscUzG0+BGGsgKu/KGwgKu/KLApIr6MqTIju3NaVHgbW0Air7tnw4mBgt9DKbTuMDRbQ4UTClBQoRzTNm8m7pmWbzpwyc1iBYFKh6sFskormYUQU5f2f4mPdYFkjO4dgEfyHqZWlcYw63olFhXAUL+sOzAPLzSyiwrjB7lmsFxniKoiIR861pzMZ4WBsoCrvyhsICrvyixqf7Y8soIS+mhR/hBJnhOYHi1IoqLlDbXn7wZsAkX9YdmGCTmsQLAtEQ1knZSw2W7AsEbVzrDKGHR72UBYpOr/xCP5D1MrSuMYdb0SiwrgKF/WHZgHl5pZRYVxg9yzWC4zxFVRPU8wdp2+2em3a0UFHaAicw/Odk1heBhvoCrvyixqf7Y8soHi+hGUKUM/aV5gfrgzOKlJmbTadxgTLzSyiwrjGDTmsQLAtEETSiC3lCLzIgsUb1PR2zs9G+WAWCTq/8Qj+Q9TK0rjGGW3Yj+GDcQFK/rDswD6/rDswOcrMylBGX7zxFdRGmk1hXkGegKu/KHAgKu/KLGp/tjyygdL/ALco4SvhAgrisgPLzSyiwrjGDTmsQLAtUPHav+Lm+rXBXI7SxHU/DsI2lNNSRMpKfybtCzRuhk1hXBH8hGZSMmbyxGOW9EosK4CBf1h2YB9f1h2YHqWawXGeIqyI00msK8g10BV35Q4EBV35RY1P9seWUDlfdiUWHmA8WhnCipSZm02HcBIvNLKLCuMYNOaxAsCuRHU9H+nm9Z59zdm8K5HRrYyTlMRnaU9vtoXCI0MmtK4gnOR9Tg24DBLbsR/DBuICFf1h2YCdf1h2YHKWawXGeIqiN00mtK8NlAVd+UOBAVd+UWFQ/NydPPPBuIDtfdiUWHmA7W58zFSjfh7YeAEy80v8TxGCTmsQLArUPVgsUjppPZiYWyI0MmtK4gkeQjMpGTN5YjGrbsR/DBuICpeaKUWleYDy/rDswNUs1guM8RXUPVg2EBV35Q4EBV35RYVFqJ2nlBCXnyxxQSoODOW8/ihT2gZrisgTLzSyiwrjGDTmsQLApUnoupb40MY+ZtrguUbE9VJ6fGgvyfoFeiep5grSt9s9Nu1L8h6mVpXGMctuxH8MG4gKV/WHZgIP1C7cosLAGmWawXGeIrqHqwbH6fdR0fY3Dzpb6T0hwICrvyiyKOJLoTWkZNZtm8GH+W0GW0DhewuahSidvwsKYvZbLCY4DpbxXMxTTafiW1t9zwJl5pZRYVxjBpzWIFgWqHYyTtoYbbNoV6NjuZ6OUTOT91G"+
                                          "6jYFijO4dgEfyHqZWlcYx63olFhXAUL+sOzAPr+sOzA5SzWC4zxFVQ9WDYQFXflDgQFXflFhUfyyE2zTmf/P+egGy4rIH63juqlF7dvjum8vIC5eaWUWFcYnac1iBYFqh6sFwjeq6O1+xjfLBjgqEZ3DsAm+R9Tg24DBreiUWFcBQv6w7MA8vNLKLCuMHuWawXGeIqyI00msK8gz0BV35Q4EBV35RY1P9seWUDZd9uV8R3mB4t9DKbTuMDBf1h2YYJOaxAsC1Q9WCwSXM/T4uo2WbKQqEPVgl+Q9TK0rjGHW9EosK4Chf1h2YCdeROsmfhSTqMbS3A9SuJ+pLZPM0meuzeKqiInrZPczZ4b5/PzDRQeik9p3kGugKu/KLGp/tjyygbLvtyviO8wRFvoZTadxgTrzSyiwrjGDTmsQLAtUPVgsEZ3DsAsEZ/wCQj+Q9TK0rjGGXnYjuGBcYFK/rDswFy80sosK4we5ZrBcZ4imI3TSa0rw0UBV35Q2EBV35RY1P9seWUDhefNGSpk7Wf8kB6vjKKOUGVm3+95EwCxeaWUWFcYwac1iBYFqh6sFgjO4dgFgjO4dgEnyPqcG3AYJbdiP4YNxAYryJ1kz8KSdRjaW4Cdf1h2YHKWawXGeIqqHqwaCAq78obCAq78osSmLmZE32z1on2fkDpflzcOUfBPROR+BbWnvJr2ger2KIukYHbvLwncBGvNLKLCuMYNOaxAsC1Q9WDARncOwCoRncOwCQ5I1CA7AYZb0SiwrgMF/WHZgJ1/WHZgcpZrBcZ4inIimT2neGeg+p6OzY33tayfzmDgQFXflFjU2pladwHa+gmcKUMKb4SLZvMDlbwIXMymbae0tx+IFC8ieuhHuKk2zM9N8+2igYJOxRdIItu1/mW/YW/YQWaDitXO02s8zZebt4YCM7h2AVCM7h2ASfI+pwbcBg1vRKLCuAwX9YdmAnX9YdmBylmsFxniKajO4dgGggKu/KG3+n0GF8cnNnh78/ywWhT/bHllBBXxkcKUGX7SvMDpZ9+/ECpfQIXxR5fCdMFpMbvb/jhiE5FF00p9u30aZ+ypoIK1EdTFSfyJ+y/wDO0LZHGUb0dpkU0+82WmdNG0KlGdw7AJPkfU4NuAwa3olFhXAYL+sOzATr+sOzA4SqFBhSgigmRn8Z4inozuHYBsICrvyhsICrvyiwKGERcnsMyIzMmeRAer/tyjhK+EBys+/fiCAt9NKbDvMYFPQIHSO0U1Ow7fZTsaYVaHOD9O0yonn2T/2FUjeY+nf5/wCdkLBJ1f8AiEfyHqZWlcY//9k=",
                                          5,20)     
EndProcedure

Procedure ParticleBurst(pointer)

    ;//  Position the emitter where the mouse/touch event was
    !emitter.x = game.camera.x+v_pointer.x;
    !emitter.y = game.camera.y+v_pointer.y;

    ;//  The first parameter sets the effect To "explode" which means all particles are emitted at once
    ;//  The second gives each particle a 2000ms lifespan
    ;//  The third is ignored when using burst/explode mode
    ;//  The final parameter (10) is how many particles will be emitted in this single burst
    !emitter.start(true, 2000, null, 10);

EndProcedure

Procedure CreateGame()
  SetScreenBackColor($642C28)
 
  TileMap=CreateTileMap("ground_24x1") 
  TileLayer1=CreateTileLayer("layer1", TileMap, 40, 30, 32, 32, 0.5, 0.5)
  TileLayer2=CreateTileLayer("layer2", TileMap, 40, 30, 32, 32)
  SetEntityAlpha(TileLayer1,0.2)
  SetEntityFilters(TileLayer1,DisplaceFilter) 
  !v_TileLayer1.resizeWorld();
 
  For x=0 To TileLayerWidth(TileLayer1)
    For y=0 To TileLayerHeight(TileLayer1)
      tile=RandomInteger(0,23)
      If RandomInteger(0,100)<30 : UpdateTileLayer(TileLayer1,tile,x,y) : EndIf
      If x=0 Or y=0 Or x=39 Or y=29 : UpdateTileLayer(TileLayer2,1,x,y) : EndIf
      tile=RandomInteger(0,23)
      If RandomInteger(0,100)<40 : UpdateTileLayer(TileLayer2,tile,x,y) : EndIf
    Next     
  Next     
 
  !window.cursors = game.input.keyboard.createCursorKeys();
 
 
 

 
  !window.emitter = game.add.emitter(0, 0, 100);
  !emitter.makeParticles('diamond_5x1',[0,1,2,3,4],undefined,true);
  !emitter.gravity = 200;
  !emitter.blendMode=PIXI.blendModes.ADD;
  !emitter.setScale(0.1, 1, 0.1, 1, 2000);

 
  *pt=@ParticleBurst()
  !game.input.onDown.add(p_pt, this);

EndProcedure

Procedure UpdateGame()
  !;if (cursors.left.isDown)
  !{
  !    game.camera.x -= 4;
  !}
  !; if (cursors.right.isDown)
  !{
  !    game.camera.x += 4;
  !}
  !;if (cursors.up.isDown)
  !{
  !    game.camera.y -= 4;
  !}
  !; if (cursors.down.isDown)
  !{
  !    game.camera.y += 4;
  !}
  !v_TileLayer1.filters[0].offset.x+=5;
EndProcedure

Procedure RenderGame()
EndProcedure

ScriptLoaded()

User avatar
Paul
 
Posts: 14
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada

Re: Sprite and Special FX (Pixi / Phaser)

by Paul Sat Apr 19, 2014 1:59 pm

Just a blank screen here using latest FireFox (28.0)
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Sprite and Special FX (Pixi / Phaser)

by eddy Sat Apr 19, 2014 2:32 pm

Paul wrote:Just a blank screen here using latest FireFox (28.0)


Did you test the first example or the second one ?

For the first example, you'll need :
  • to disable the debug mode
  • two image
    • panda.png
    • displacement_map.jpg (greyscale image)

Image
User avatar
Paul
 
Posts: 14
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada

Re: Sprite and Special FX (Pixi / Phaser)

by Paul Sun Apr 20, 2014 1:50 pm

Tested both examples using both debugger on and off and both open FireFox and only show tan color screen.
What are you using to view?
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Sprite and Special FX (Pixi / Phaser)

by eddy Tue Apr 22, 2014 4:41 pm

I'm using Chrome browser for my tests because SpiderBasic is in alpha version for the moment.

If you have some time, you can test these demos:

These are short examples of what you can achieve using this 2D engine or this game frameworks.
User avatar
Paul
 
Posts: 14
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada

Re: Sprite and Special FX (Pixi / Phaser)

by Paul Tue Apr 22, 2014 9:49 pm

eddy wrote:I'm using Chrome browser for my tests because SpiderBasic is in alpha version for the moment.

If you have some time, you can test these demos:

These are short examples of what you can achieve using this 2D engine or this game frameworks.



These demos both work fine in FireFox. Just the above examples in SpiderBasic won't work in FireFox. Too Bad :(
flaith
 
Posts: 3
Joined: Tue Feb 25, 2014 1:35 am
Location: Ho Chi Minh City, Vietnam

Re: Sprite and Special FX (Pixi / Phaser)

by flaith Wed Apr 23, 2014 3:49 am

Both worked for me ;)
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Sprite and Special FX (Pixi / Phaser)

by eddy Mon Apr 06, 2015 5:46 pm

PIXI example updated
- fixed loading of plugins and images
Return to Showcase

Who is online

Users browsing this forum: No registered users and 2 guests