martyj Posted March 24, 2016 Share Posted March 24, 2016 Check out a video about the UI for my game. The UI uses Awesomium built using Html, css, javascript, and AngularJS as the framework. Quote Link to comment Share on other sites More sharing options...
Rick Posted March 24, 2016 Share Posted March 24, 2016 I love Awesomium. Did you actually get the inventory working yet (dragging icons around and such?). Quote Link to comment Share on other sites More sharing options...
martyj Posted March 24, 2016 Author Share Posted March 24, 2016 Yes. I used jQuery UI's draggable for it. I probably should have recorded that aspect . I was super rushed last night. Quote Link to comment Share on other sites More sharing options...
Rick Posted March 24, 2016 Share Posted March 24, 2016 Yeah, I'd love to see the html/css/javascript for the inventory. That was a part that sort of stumped me. Also, did you get keyboard injection working with Awesomium? Quote Link to comment Share on other sites More sharing options...
martyj Posted March 24, 2016 Author Share Posted March 24, 2016 I am still working on keyboard. It's the one feature preventing me from showing a multi-player video. Javascript: element.droppable({ drop:function(event,ui) { var dragIndex = angular.element(ui.draggable).data('index'); var dragLoc = angular.element(ui.draggable).data('location'); var dropIndex = angular.element(this).data('index'); var dropLoc = angular.element(this).data('location'); if(dragLoc == dropLoc) { if(dragLoc == 'in') { var dragRow = parseInt(dragIndex/GAME_ENGINE.InventoryScope.cols); var dragCol = dragIndex%GAME_ENGINE.InventoryScope.cols var dropRow = parseInt(dropIndex/GAME_ENGINE.InventoryScope.cols); var dropCol = dropIndex%GAME_ENGINE.InventoryScope.cols var oldItem = GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol]; GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol] = GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol]; GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol] = oldItem; // TODO: Have Inventory do this logic GAME_ENGINE.InventoryScope.moveItem(dragIndex, dropIndex); } else { var oldItem = GAME_ENGINE.ActiveItemScope.items[dropIndex]; GAME_ENGINE.ActiveItemScope.items[dropIndex] = GAME_ENGINE.ActiveItemScope.items[dragIndex]; GAME_ENGINE.ActiveItemScope.items[dragIndex] = oldItem; // TODO: Have Inventory do this logic GAME_ENGINE.ActiveItemScope.moveItem(dragIndex, dropIndex); } } else { if(dragLoc == 'in') // dropLoc = ai { var dragRow = parseInt(dragIndex/GAME_ENGINE.InventoryScope.cols); var dragCol = dragIndex%GAME_ENGINE.InventoryScope.cols var oldItem = GAME_ENGINE.ActiveItemScope.items[dropIndex]; var newItem = GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol]; GAME_ENGINE.ActiveItemScope.items[dropIndex] = newItem; GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol] = oldItem; // TODO: Have Inventory do this logic GAME_ENGINE.InventoryScope.addItem(oldItem.id, oldItem.qty, dragIndex); GAME_ENGINE.ActiveItemScope.addItem(newItem.id, newItem.qty, dropIndex); } else // Drag Location = ai, drop Location inventory { var dropRow = parseInt(dropIndex/GAME_ENGINE.InventoryScope.cols); var dropCol = dropIndex%GAME_ENGINE.InventoryScope.cols var oldItem = GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol]; var newItem = GAME_ENGINE.ActiveItemScope.items[dragIndex]; GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol] = newItem; GAME_ENGINE.ActiveItemScope.items[dragIndex] = oldItem; // TODO: Have Inventory do this logic GAME_ENGINE.ActiveItemScope.addItem(oldItem.id, oldItem.qty, dragIndex); GAME_ENGINE.InventoryScope.addItem(newItem.id, newItem.qty, dropIndex); } } scope.$apply(); GAME_ENGINE.ActiveItemScope.$apply(); GAME_ENGINE.InventoryScope.$apply(); } }); HTML: <div id="active_item_inventory"> <div class="inventory_item" ng-repeat="item in activeItems track by $index"> <div ng-if="item.qty==0"> <div class="item" data-index="{{$index}}" ng-class="{selected: item.id!=0}" data-location="ai" droppable> <div class="active_selection_box" ng-show="$index == selected"></div> </div> </div> <div ng-if="item.qty > 0"> <div class="item"> <img ng-src="{{item.icon}}" data-index="{{$index}}" ng-class="{selected: item.id!=0}" data-location="ai" draggable /> <div class="count" ng-show="item.qty > 1"> {{item.qty}} </div> <div class="active_selection_box" ng-show="$index == selected"></div> </div> </div> </div> </div> <div id="inventory"> <div class="inventory_row" ng-repeat="row in inventoryRow track by $index"> <div class="inventory_item" ng-init="rowIndex = $index"> <div ng-repeat="item in row track by $index"> <div class="row_item" ng-init="colIndex = $index"> <div ng-if="item.qty == 0"> <div class="item" data-index="{{(rowIndex * cols) + colIndex}}" data-location="in" droppable></div> </div> <div ng-if="item.qty > 0"> <div class="item"> <img ng-src="{{item.icon}}" data-index="{{(rowIndex * cols) + colIndex}}" data-location="in" draggable /> <div class="count" ng-show="item.qty > 1"> {{item.qty}} </div> </div> </div> </div> </div> </div> </div> </div> CSS #inventory{ } #inventory .inventory_row{ padding: 0px 0px 0px 2px; height: 84px; } #inventory .row_item{ } #inventory .item{ background: #404040; line-height: 64px; width: 64px; height: 64px; margin: 10px; float: left; } #inventory .item img{ vertical-align: middle; width: 54px; margin: 5px; } .item .count{ position: absolute; margin-top: -84px; margin-left: 4px; } #active_item_inventory{ height:104px; } #active_item_inventory .inventory_item{ float: left; } #active_item_inventory .item{ background: #404040; width: 84px; height: 84px; margin: 10px; line-height: 64px; } #active_item_inventory .item img{ vertical-align: middle; width: 74px; margin: 5px; } .sortable{ list-style-type: none; margin: 0; padding: 0; } .ui-draggable-dragging{ z-index: 1000; width: 54px !important; } Quote Link to comment Share on other sites More sharing options...
martyj Posted March 24, 2016 Author Share Posted March 24, 2016 I only have two bugs with the inventory code. 1. When you drag an item, it sometimes doesn't resize correctly to the drop location if you drop it to the same location. 2. When you drag an item, the quantity doesn't go with the item. I can send you a zip of the whole UI if you're interested. Along with some javascript console commands to add items to the inventory. Let you play around with it. Quote Link to comment Share on other sites More sharing options...
Rick Posted March 24, 2016 Share Posted March 24, 2016 Yeah, it would be cool to create a module to plug and play some of these basic UI elements. Does your html scale correctly according to the resolution/aspect ratio? That's always been another issue for me. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.